css - 浮动div的内容垂直居中

Question

如何将浮动 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 元素。

score 18 · Accepted Answer

其他的都是对的，您需要嵌套两个 DOM 元素，这为您提供了更多控制居中的选项。这是代码：

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

score 11 · Accepted Answer

在<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;
}

score 9 · Accepted Answer

如果你知道高度，那么

line-height:100px;

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

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

score 3 · Accepted Answer

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

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;
}

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

只需使用伪选择器即可。

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

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

css - 浮动div的内容垂直居中

6 回答 6

Related

Reference