如何在表格单元格中垂直对齐图像和文本？
[英]How to vertically align image and text in table cell?
问题描述
I'm trying to get the text to be on the right side and vertically center aligned with the image. 
我试图将文本放在右侧并垂直居中与图像对齐。 How can I do that? 我怎样才能做到这一点？
My current code: 我目前的代码：
<div style="display: table;"> <div style="display: table-cell;"><img src="//dummyimage.com/100"></div> <div style="display: table-cell;">text</div> </div>
3 个解决方案
解决方案1
5 2017-01-15 00:06:40
use CSS3 Flexible Box Layout : 使用CSS3 灵活的盒子布局 ：
from the documentation: 从文件：
providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
your example with centered text to the right would look like this 右侧居中文本的示例如下所示
#pageElement{display:flex; flex-wrap: nowrap; align-items: center}
<div id="pageElement"> <div> <img src="http://placehold.it/350x150"> </div> <div> text </div> </div>
I found this cheat-sheet very helpful and browser compatibility you find here 我发现这个备忘单非常有用，你在这里找到的浏览器兼容性
解决方案2
1 2017-01-15 02:08:45
In table cell, the default value of vertical-align is baseline . 在表格单元格中， vertical-align的默认值为baseline 。 You can change that to middle for center align. 您可以将其更改为middle以进行中心对齐。 Read more about it on MDN . 在MDN上阅读更多相关信息。
.table { display: table; } .table > div { display: table-cell; vertical-align: middle; }
<div class="table"> <div><img src="//dummyimage.com/100"></div> <div>text</div> </div>
解决方案3
-2 2017-01-14 23:28:22
Use td, tr and table. 使用td，tr和table。
<body>
<table>
<tr width="100%;">
<td width="50%;" valign="bottom">
<img style="width:100%" src="https://s.w.org/images/home/screen-themes.png?1"/> </td>
<td width="50%;" align="center" valign="center"> text dddddddddddd </td>
</tr>
</table>
</body>
See JsFiddle for example: https://jsfiddle.net/bndr6x4y/1/ 例如，参见JsFiddle： https ：//jsfiddle.net/bndr6x4y/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.