时间戳

首页 > 解决方案 > 在表格单元格元素中水平和垂直居中

css - 在表格单元格元素中水平和垂直居中

问题描述

我有这个结构（简化）：

<div id="outer" style="display: table-cell">
  <div id ="someOtherDiv">.......</div>
  <div id="inner" style="text-align: center; vertical-align: middle">
    <img src="path" />
  </div>
</div>

我需要 IMG 垂直和水平居中。

图像在屏幕中仅水平居中但垂直居中。

我还应该添加什么来实现这一点？

当然，如果我将 BODY 设置为 100% 高度，然后将内部 div 设置为 100% 高度，它可以工作，但事实是我实际上无法将 100% 高度添加到 BODY 标签，所以我只需要更改INNER div 的一些风格。

我想如果 OUTER div 是表格单元格，理想情况下，垂直对齐样式应该可以工作，但事实并非如此。事实上，在使用 Firebug 时，我可以看到 OUTER div 扩展到所有屏幕，而 INNER div 只占用 IMG 空间。

有什么建议吗？

标签： css

解决方案

...
<div id="inner" class="flexbox; align-items: center">
  <img src="" class="vertical-align: middle"/>

也许对内部 div 使用 flexbox 和 align-items，然后在 img 标签中垂直对齐 img。但还要考虑设置宽度、填充和高度，以控制图像所需的最大空间。

推荐阅读