Question

我正在尝试将文本放在右侧并垂直居中与图像对齐。我怎么能这样做？

我目前的代码：

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>

Answer 1

使用CSS3 Flexible Box Layout：

来自文档：

在页面上提供元素的排列，使得当页面布局必须适应时，元素的行为可预测不同的屏幕尺寸和不同的显示设备。对于很多应用程序，灵活的盒子模型提供了改进块模型，因为它不使用浮点数，也不使用浮点数容器的边距随其内容的边缘而崩溃。

右边居中文字的示例看起来像这样

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}

<div id="pageElement">
  <div> <img src="http://placehold.it/350x150"> </div>
  <div> text </div>
</div>

我发现此cheat-sheet非常有用且您找到的浏览器兼容性here

Answer 2

在表格单元格中，<script> jQuery(document).ready(function(){ $("#modalTrigger").click(function(){ $(".modal-caption").html($(this).prev("#mdc").html()); }); }); </script>的默认值为vertical-align。您可以将其更改为baseline以进行居中对齐。请在MDN上了解详情。

middle

.table {
  display: table;
}
.table > div {
  display: table-cell;
  vertical-align: middle;
}

Answer 3

使用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>

例如，参见JsFiddle： https://jsfiddle.net/bndr6x4y/1/

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

3 个答案: