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元素。

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

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

Answer 3

如果你知道身高，那么

line-height:100px;

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

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

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

它只适用于单行文本。

Answer 5

只需使用伪选择器。

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

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

Answer 6

只需使用伪选择器。

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

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

垂直居中浮动div的内容

6 个答案: