對齊多行文本的項目基線

Question

在flex容器中，我有兩位內容。雙方都包含多行文字。我希望排列雙方頂線的基線。我已經轉向align-items: baseline來實現這一目標，但不幸的是，它並沒有真正產生預期的結果。有時瀏覽器很簡單，似乎根本沒有對齊它們。你可以看到不同的結果如下：

不齊：

<div style="display:flex;align-items:baseline"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>text</td> 
 
     </tr> 
 
     <tr> 
 
     <td>text2</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <div>text3</div> 
 
</div>

上：

<div style="display:flex;align-items:baseline"> 
 
    <div> 
 
    <div>text</div> 
 
    <div>text2</div> 
 
    </div> 
 
    <div>text3</div> 
 
</div>

理想情況下，我想以便能夠簡單地指示包含我希望對齊的基線的文本的元素。但我可能會解決任何解決方案，始終將文本頂端的底線對齊。

目前，我沒有使用align-items: baseline，我只是簡單地使用了一定量的填充來使它們對齊，這並不理想。我怎樣才能讓瀏覽器對齊我？

Answer 1

問題是table cells have vertical-align: middle by default。

因此，你應該把它切換爲baseline：

#wrapper { 
 
    display: flex; 
 
    align-items: baseline; 
 
} 
 
td { 
 
    vertical-align: baseline; 
 
} 
 
/* Some additional styles to display the baseline: */ td { font-size: 200%; } #wrapper:after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid red; }

<div id="wrapper"> 
 
    <table> 
 
    <tr><td>text</td></tr> 
 
    <tr><td>text2</td></tr> 
 
    </table> 
 
    <div>text3</div> 
 
</div>