Question

我有一个基于流量百分比的容器，里面有一个包含标题的div。我希望每当浏览器调整大小或视口更改时，此标题始终垂直位于此容器的中心。是否可以在没有JavaScript的情况下完成垂直重新定位？

<div class="fluid-container">
    <div class="meta">Title</div>
</div>

Answer 1

这是我最喜欢的方式。我使用两个辅助类来实现这个目标：

.valign:after {
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: '';
}
.valign > .valigned {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

现在，当您需要垂直对齐某些内容时，只需将valign类添加到父级，将valigned添加到您的actualt元素中。像这样：

<div class="fluid-container valign">
    <div class="meta valigned">Title</div>
</div>

http://jsfiddle.net/dfsq/MQMEZ/

Answer 2

如果您知道“title”标签的高度，或者您可以使用line-height和height进行设置，则可以执行以下操作：

.fluid-container {
  position: relative;
}
.fluid-container > .meta {
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

示例：http://jsfiddle.net/Yjy5C/2/

Answer 3

您可以（ab）使用line-height，inline-block和vertical-align:middle来获得所需的效果。它适用于所有体面的浏览器。（我曾经发现过这种技术here）

.fluid-container {
    line-height: 8em; /* some abundant value, around the max height */
}
.fluid-container > div.meta {
    vertical-align: middle; /* center… */
    display: inline-block; /* …like text */
}

如何在没有JavaScript的情况下在流体容器中垂直居中文本

3 个答案: