Question

我遇到线高问题，我无法理解。

以下代码将图像置于div中：

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

但是，如果我将线条高度更改为100％，那么线条高度不会生效（或者至少不会成为div的100％）。

Example jsfiddle

有谁知道我做错了什么？

Answer 1

line-height: 100%表示该元素的字体大小的100％，而不是其高度的100％。实际上，行高总是相对于字体大小而不是高度，除非它的值使用绝对长度单位（px，pt等）。

Answer 2

我知道这个问题很老，但我发现对我来说是完美的解决方法。

我将此css添加到我想要居中的div中：

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

每次都有效，而且很干净。

编辑：为了完成，我使用scss，我有一个方便的mixin，我包含在每个父谁是我想要垂直居中的直接孩子：

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

完整说明： div:before将在div中添加一个元素，但在它的任何子元素之前。使用:before或:after时，我们必须使用content:声明，否则不会发生任何事情，但出于我们的目的，内容可能为空。然后我们告诉元素与其父元素一样高，只要定义其父元素的高度并且该元素至少是内联块。 vertical-align定义了与父相关的自我的垂直位置，而不是text-align的工作方式不同。

@mixin声明适用于sass用户，它将使用如下：

div {
    @include vertical-align(middle)
}

Answer 3

当您使用百分比作为行高时，它不是基于div容器，而是基于字体大小。

Answer 4

line-height：100％是垂直居中元素的简单方法，如果它是根据容器计算的，但这太容易了，因此它不起作用。

相反，它只是说行高的另一种方式：1em（对吧？）

垂直居中元素的另一种方法是：

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Answer 5

可能不太漂亮，但它正在发挥作用，并且它的语义;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

显示：table-cell给一个元素唯一的表ablillity来对齐verticaly（至少我认为它是唯一的）

Answer 6

这是一个非常晚的答案，但在现代浏览器中，假设父元素也是屏幕高度的100％，您可以使用vh视口单元。 FIDDLE

line-height: 100vh;

Browser support

Answer 7

您可以根据该元素高度设置 line-height 。如果元素高度为200px意味着您需要将行高设置为200px以使文本居中。

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Answer 8

此解决方案在IE9及更高版本中有效。首先，我们将孩子的最高排名设置为50％（在父母中间）。然后使用translate规则，将孩子向上移动其实际高度的一半。主要好处是我们不需要定义孩子的身高，它是由浏览器动态计算的。 JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Answer 9

一种更现代的方法是为此使用flexbox，它更简单，更干净。但是，flexbox与inline-block，float或position过去是完全不同的范例。

要在.parent中对齐项目，请执行以下操作：

.parent {
  display: flex;
  align-items: center;
}

就是这样。 flex个父母的孩子会自动转换为弹性孩子项目。

您应该阅读有关flexbox的更多信息，这个备忘单是一个不错的起点：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 10

这是现代的解决方案，您需要在容器div或外部div中设置以下CSS。

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

以下其他解决方案也可以应用于要垂直居中的元素。请注意，外部或容器div应该为

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

请注意，外部或容器div的位置应相对。

line-height占不起作用的百分比

CSS

HTML

10 个答案: