[英]Align items baseline for multi-line text
In a flex container, I have two bits of content. 在flex容器中,我有两个内容。 Both sides contain multiple lines of text.
双方都包含多行文本。 I wish to line up the baseline of the top lines of both sides.
我希望将双方顶线的基线对齐。 I've turned to
align-items: baseline
to achieve this, but unfortunately, it doesn't really produce the intended result. 我已经转向
align-items: baseline
实现这一目标的align-items: baseline
,但是不幸的是,它并没有真正产生预期的结果。 Sometimes the browser just plain doesn't seem to align them at all. 有时,浏览器只是简单地似乎根本没有对齐它们。 You can see the different outcomes below:
您可以在下面看到不同的结果:
Misaligned: 未对齐:
<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>
Top: 最佳:
<div style="display:flex;align-items:baseline"> <div> <div>text</div> <div>text2</div> </div> <div>text3</div> </div>
Ideally, I'd like to be able to simply indicate the elements containing the text whose baseline I wish to align. 理想情况下,我希望能够简单地指出包含我希望对齐其基线的文本的元素。 But I would probably settle for any solution that always aligns the baseline of the top line of the text on each side.
但是,我可能会选择任何一种始终使文本顶行的基线与每一行对齐的解决方案。
Currently, I don't use align-items: baseline
and I simply throw on a magic amount of padding to make them align, which is less than ideal. 当前,我不使用
align-items: baseline
而我只是简单地添加了一些神奇的填充来使它们对齐,这不理想。 How can I make the browser align them for me? 如何使浏览器为我对齐它们?
The problem is that table cells have vertical-align: middle
by default . 问题在于表单元格具有
vertical-align: middle
默认情况下为vertical-align: middle
。
Therefore, you should switch it to baseline
: 因此,您应该将其切换为
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.