如何基於特定線垂直對齊嵌入塊元素，忽略其他線？

我有幾個表單域，每個都在父元素display: inline-block中。如何基於特定線垂直對齊嵌入塊元素，忽略其他線？

.Field { 
 
    display: inline-block; 
 
    border: solid 1px silver; 
 
    width: 100px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
    vertical-align:middle; 
 
    color:gray; 
 
} 
 
.Control { 
 
    color:black; 
 
    border: solid 1px navy; 
 
    background-color:#def; 
 
    padding:2px; 
 
}

<div class="Field"> 
 
    Some text before the line. 
 
    <div class="Control">This</div> 
 
</div> 
 

 
<div class="Field"> 
 
    <div class="Control">should</div> 
 
    Some text after the line. 
 
</div> 
 

 
<div class="Field"> 
 
    <div class="Control">be</div> 
 
</div> 
 

 
<div class="Field"> 
 
    Some text before... 
 
    <div class="Control">neatly</div> 
 
    ...and some text after. Maybe even an image. 
 
</div> 
 

 
<div class="Field"> 
 
    is it possible? 
 
    <div class="Control">aligned</div> 
 
</div>

我試圖讓vertical-align工作使得「主」（.Control）在田間元素是彼此相鄰：字段之前或在其內部的控制後，有其他元素。
每個.Field的基線應由其.Control確定。

手動指定line-height不是一個選項，並且周圍的文本不應該有零高度或position: absolution：周圍的文本仍應該是可見的，並影響字段的高度。

這是可能的CSS？

來源

2014-09-28 Kobi

另一個小加成 - 如果'Control'也可以有多行，並且我們想用它的第一線對齊：HTTP：//的jsfiddle .net/anmggL1t/1 /。增加了'.Control {display：inline-block;盒子尺寸：邊框;垂直對齊：文本頂部;寬度：100％;}' – Kobi 2014-10-06 13:39:42

您需要對標記進行小調整，將控件元素後面的文本放入span元素中。

然後從.Field div中刪除vertical-align:middle，並添加.Control + span { display:table-cell }以隱藏垂直對齊評估中控件元素之後的文本。

這給了你：

.Field { 
 
    display: inline-block; 
 
    border: solid 1px silver; 
 
    width: 100px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
    color:gray; 
 
} 
 
.Control { 
 
    color:black; 
 
    border: solid 1px navy; 
 
    background-color:#def; 
 
    padding:2px; 
 
} 
 

 
.Control + span { 
 
    display: table-cell; 
 
}

<div class="Field"> 
 
    Some text before the line. 
 
    <div class="Control">This</div> 
 
</div> 
 

 
<div class="Field"> 
 
    <div class="Control">should</div> 
 
    <span>Some text after the line.</span> 
 
</div> 
 

 
<div class="Field"> 
 
    <div class="Control">be</div> 
 
</div> 
 

 
<div class="Field"> 
 
    Some text before... 
 
    <div class="Control">neatly</div> 
 
    <span>...and some text after. Maybe even an image.</span> 
 
</div> 
 

 
<div class="Field"> 
 
    is it possible? 
 
    <div class="Control">aligned</div> 
 
</div>

來源

2014-09-28 08:49:23 Alohci

謝謝，作品非常漂亮！我可能會在控件之前爲文本添加一個「span」：http://jsfiddle.net/anmggL1t/。這看起來正是我所需要的......這種方法有缺點嗎？使用'table-cell'有效嗎？無論如何，再次感謝！ – Kobi 2014-09-28 09:01:57

這裏使用'table-cell'肯定有效。我認爲任何*方法都有缺點，但沒有什麼具體的東西可以立刻想到。 – Alohci 2014-09-28 09:16:31

我不認爲這是可以做你的限制，但一個可靠的方法來做到這一點將使用：之前和：之後的假選擇器。但是，這不是真正可以維護的，因爲每個高於或低於突出顯示文本的內容都應該是絕對位置，並且位於CSS的「內容」屬性中。

如果沒有絕對定位，您無法實現這些操作。

來源

2014-09-28 06:36:00

如何基於特定線垂直對齊嵌入塊元素，忽略其他線？

回答

相關問題