2016-05-25 52 views
1

由於我一直在研究和研究它幾個小時沒有運氣,我認爲答案是否定的,但會喜歡確認這種或那種方式。是否可以垂直居中多行標籤?

我在選擇字段的左邊有一個多行標籤。假設標籤是3個包裝線。我希望標籤的中間一行與選擇區域垂直對齊。就像這樣:

Label Line 1 
Label Line 2  SelectField 
Label Line 3 

基本上,我的問題是非常相似,這從一個前幾年,這是不明確回答:Vertical center label with text area and with select and with textbox。有人迴應說,JavaScript是必需的。

我有一個FIDDLE到目前爲止我的努力。我發現了一些有趣的變化,但沒有匹配我正在尋找的東西。

有人可以確認這是或不可能的嗎?謝謝!!!

[編輯:拼寫]

回答

1

試試這個

HTML

<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 
<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 
<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 

CSS

div.divclass { 
    border: 1px solid red; 
    height: 150px; 
    width: 400px; 
} 
label.labelleft { 
    width: 90px; 
    text-align: right; 
    background: lightblue; 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
select.selectclass { 
    width: 100px; 
    display: inline-block; 
    margin-left: 20px; 
} 

工作Fiddle

+0

這很美!我應該在幾個小時前發佈這個:) – gpd209

0

只需使用一個表。

td { vertical-align: middle; } 
 
.narrow { width:8em; padding-right: 2em; }
<table> 
 
    <tr> 
 
    <td class="narrow"><label for="menu">Label text wrapped across multiple lines</label></td> 
 
    <td><select name="menu" id="menu"> 
 
     <option>Menu item #1</option> 
 
     <option>Menu item #2</option> 
 
     <option>Menu item #3</option> 
 
     <option>Menu item #4</option> 
 
    </select></td> 
 
    </tr> 
 
</table> 
 

0

是的,它是可能的,使用flexbox。檢查this出來。關鍵是在你的小提琴中使用下面的代碼。

div.divclass { 
    display: flex; 
    align-items: center; 
    justify-content: start; 
    height: 150px; 
    width: 400px; 
    border: 1px solid red; 
} 

select.selectclass { 
    width: 100px; 
    display: flex; 
} 

瞭解更多關於flexboxhere

+0

這看起來也很完美。謝謝!我希望我能選擇兩個答案作爲工作解決方案。我會閱讀更多有關flexbox的信息 - 看起來非常有用。 – gpd209

+0

IMO這是一個更好的解決方案。它適用於任何地方+它會使事情完美中心,沒有任何硬編碼值 –