浮动div的内容垂直居中

Posted 2023-03-05

【中文标题】浮动div的内容垂直居中

【英文标题】：Vertically center content of floating div

【发布时间】：2012-08-23 11:39:07

【问题描述】：

如何将浮动 div 的内容垂直居中（我不知道哪个高度）？

有非常简单的 html 和 CSS（见这个小提琴：http://jsfiddle.net/DeH6E/1/）

<div class="floating">
    This should be in the middle
</div>
​
.floating 
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
   ​

如何使“这应该在中间”这句话真正出现在中间（垂直居中）？ vertical-align: middle 似乎不起作用。我试过display: table-cell，但也没有用。解决此问题的最佳方法是什么？我想避免插入任何其他 HTML 标记，只需通过 CSS 即可。

（澄清一下：我不知道容器的实际高度，100px只是举例）

编辑：我希望你能理解我，所以... 当我设计网页时，我总是遵循 HTML 包含内容而 CSS 负责视觉样式的规则。我从不将它们混合在一起，或者只使用一个来启用另一个。在这种情况下，我也想坚持这条规则。我不想只为 CSS 插入 HTML 元素。

【问题讨论】：

好的，你不能添加元素/你不能使用JS/你不能使用固定高度。男孩，现在我也想知道答案。

@pavel-s - “我遵循 HTML 保存内容而 CSS 负责视觉样式的规则”。实际上，在文本周围添加一个段落<p> 实际上是语义正确的 HTML。

【参考方案1】：

其他人是对的，you need to nest two DOM elements，它为您提供了更多控制居中的选项。代码如下：

.floating 
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;

.floating p 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;

<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it's also horizontally
    centered for added joy.</p>
</div>

【讨论】：

不行，你忘了float （添加后内容对齐顶部）。

对我来说，这忽略了浮动文本的意义...不应该是居中和浮动旁边别的文本的例子吗？

【参考方案2】：

在<p> 中添加文本。

HTML

<div class="floating">
    <p>This should be in the middle</p>
</div>

CSS

.floating 
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;

​

【讨论】：

嗯，这正是我想要避免的：在内容和现有 div 之间插入另一个元素。有没有其他解决方案？

【参考方案3】：

如果你知道高度，那么

line-height:100px;

如果没有，渲染后使用javascript设置行高。

http://jsfiddle.net/DeH6E/4/

【讨论】：

Nonono，固定高度和javascript都是我想不惜一切代价避免的解决方案（在这种情况下）。

【参考方案4】：

我也在寻找解决方案，最终想出了这个：

http://jsfiddle.net/w6j9mgjp/1/

.floating 
    height: 100px;
    float: left;
    border: 1px solid red;


.floating::before 
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;

不过，它只适用于单行文本。

【参考方案5】：

http://jsfiddle.net/DeH6E/2/

你的 div 内的文本需要在它自己的 div 标签中，并且该 div 标签需要设置为 display:table-cell;和垂直对齐：中间；而您的 .floating div 需要设置为 display:table;

或者您可以在其中设置一个 p 标签或其他格式的标签来包含您的文本，例如 span 或 p

【讨论】：

嗯，这正是我想要避免的：在内容和现有 div 之间插入另一个元素。没有其他解决办法吗？

不，有一种方法非常复杂且非常不专业，需要使用百分比填充顶部和底部，否则不行。

Christian，我不完全确定这是真的，在查看您的图片时，文本仍然对齐在 div 的顶部。

【参考方案6】：

只需使用伪选择器即可。

.floating 
    height: 100px;
    float: left;
    border: 1px solid red;


.floating::before 
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;