Question

我有以下代码：

＆＃13;

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}
span {
  display: inline-block;
  line-height: 100px;
}

＆＃13;

<div>
  <span>Hey Align me in the middle</span>
</div>

＆＃13;

如果保持行高与父div的高度相同，则span将对齐到中心。

让我们说一些我的父div高度设置为auto的情况，在这种情况下，如果我想在父级中间显示跨度，我该怎么做？我想要一个仅使用line-height的解决方案，以其他方式实现。

我用％尝试了以下内容，但似乎无效。

line-height: 100%;

但它与100％的父母不一样，是100％的孩子span，我怎样才能与父母的身高相等。？

Answer 1

不，你不能这样做。 百分比线高相对于元素本身的字体大小，而不是容器的高度。

如果您仍想使用此技巧，则必须使用固定值，即px，否则请参阅此帖子以获取更多选项 - How do I vertically center text with CSS?

注意，如果你这样做会更合理，所以当文本换行时它也可以工作。

＆＃13;

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}
span {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

＆＃13;

<div>
  <span>Hey, align me in the middle.</span>
</div>

＆＃13;

如果你知道文字不会确定，那就可以这么简单了。

＆＃13;

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}

＆＃13;

<div>Hey, middle.</div>

＆＃13;

Answer 2

如果您想避免使用line-height，可以使用transform: translateY(-50%)或display: table和display: table-cell：

.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

.container {
   height: 300px;
   width: 200px;
   background-color: red;
}


.fake-table{ display: table; height: 300px; }
.fake-td{display:table-cell ;vertical-align: middle }

请参阅live example。

Answer 3

答案很简单。由于line-height严格指代inline elements，因此您需要将内容框视为内联文字。

这里我们有两个div，一个包装器和内容：

<div class="wrapper">
    <div class="content"> Some stuff</div>
</div>

所以，首先，我们需要为wrapper元素设置一个高度，让我们给它一个600px的高度。为了让vertical-align正常工作，我们还需要给它一个line-height: 600px，注意它与div的高度相同。（如果有动态添加的东西，你可以使用javascript来完成这个部分）。

我们应该给它一些属性以使其更加可见，因此我们将为其添加边框。哦，我们希望内容也能集中在一起，所以我们会给它text-alignment center

.wrapper{
   height: 600px;
   border: solid 1px black;
   line-height: 600px;
   text-align: center;
}

接下来，我们将处理实际内容本身。首先，我们需要告诉浏览器它是display: inline-block;这就是您要求的内容：vertical-align: middle。在我们给它一个height: 200px并给它一些区别性质之后，所以border: solid 1px black;应该做到这一点。最后但并非最不重要的是，我们需要重置一些从父（text-align: center; line-height: normal）继承的东西。

/* enter code here */

.content{
    display: inline-block;
    text-align: left;
    line-height: normal;
    height: 200px;
    border: solid 1px black;
    vertical-align: middle;
    width: 200px;
}

您可以看到工作产品here

使用line-height属性在父级的垂直中间对齐元素

3 个答案: