如何在表格单元格中垂直对齐图像和文本?

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

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. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

如果页面布局必须适应不同的屏幕大小和不同的显示设备，那么在页面上提供元素的排列就可以预测元素的行为。对于许多应用程序，灵活的box模型提供了对块模型的改进，因为它不使用浮点数，flex容器的边界也不会随内容的边界而崩溃。

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

In table cell, the default value of vertical-align is baseline. You can change that to middle for center align. 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

Use td, tr and table.

使用td, tr和表格。

<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/

#1