代码之家 › 专栏 › 技术社区 › Antoniossss

为什么垂直对齐CSS属性不起作用,并且不将span放在其父级的中间高度?

css html

Antoniossss · 技术社区 · 7 年前

vertical-align 属性有一段时间了,我还没有成功地应用它,所以我决定在这里编写。

有简单的标记

<div class="parent">
  <span class="text">Some text centered here
</div>

和

.parent{
  height:100px;
  background-color:red;
  .text{
    vertical-align:middle;
    background-color:green;
  }
}

为什么span不在父容器中居中?这个属性到底适用于什么?

密码笔:

https://codepen.io/anon/pen/wXYoBO

我不是在问如何在div中居中元素 ,但为什么这个特定的css属性不能像常识所建议的那样工作。

https://codepen.io/anon/pen/QxZpYP

6 回复 | 直到 7 年前

Andrzej ZióÅek 7 年前

如果你想用 vertical-align: middle 它需要与 display: table-cell 并应用 对于家长

解决方案1

.parent{
  height:100px;
  display: table-cell;
  vertical-align: middle;
  background-color: red
}

.text{
  background-color:green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

解决方案2

使用定义的 line-height 对于 .parent 和 vertical-align 线高度 ,它是拉伸的——它有100像素。

.parent {
  height: 100px;
  background-color: red;
  line-height: 100px;
}

.text {
  vertical-align: middle;
  line-height: normal;
  background-color: green;
}

<div class=“parent”>
<span class=“text”>一些文本在此处居中</span>

解决方案3

我建议使用 display: flex ,因为使用在桌子外面根本不是个好习惯。 align-items: center 垂直对齐内容,同时 justify-content: center 水平对齐内容。

.parent{
  height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red
}

.text{
  background-color:green;
}

<<span class=“text”>一些文本在此处居中</span>
</分区>

Damian Peralta 7 年前

垂直对齐在div上不起作用,通常的解决方法是使用在容器中:

.parent{
  height:100px;
  background-color:red;
  display: table-cell;
  vertical-align:middle;
  .text{
    background-color:green;
  }
}

或者,使用 CSS3挠性箱 ,您可以使用:

.parent{
  height:100px;
  background-color:red;
  display : flex;
  align-items : center;
  .text{
    background-color:green;
  }
}

Temani Afif 7 年前

the documentation 我们将阅读:

“垂直对齐”属性可以在两种情况下使用:

内联元素框 里面 它的包含线 . 例如,它可以用于垂直定位 <img> 在里面一行文字:

但是什么是 ?

specification 为了更好地了解接线盒。一开始可能很复杂,但要让它变得简单 the height of the line box 由内联元素定义。

一

.box {
  height:100px;
  border:1px solid red;
}
span {
 background:pink;
 /*All these values will define the line box*/
 line-height:25px;
 font-size:20px;
}

<div class="box">
<span>text</span>
</div>
<div class="box">
<span style="vertical-align:middle;">text</span>
</div>
<div class="box">
<span style="vertical-align:top;">text</span>
</div>
<div class="box">
<span style="vertical-align:bottom;">text</span>
</div>
<div class="box">
<span style="vertical-align:text-top;">text</span>
</div>
<div class="box">
<span style="vertical-align:text-bottom;">text</span>
</div>

现在,假设有两个具有不同属性的inlines元素( font-size , line-height font-family 等等)。在这种情况下,将根据规范和 vertical-align 在这种情况下会产生影响,因为:

什么时候? 盒子B的高度 比线框的高度 包含它时,行框中B的垂直对齐方式是由“垂直对齐”属性确定。

.box {
  height:100px;
  border:1px solid red;
}
span {
 background:pink;
}
span:last-child {
  font-size:2em;
}

<div class="box">
<span>text</span><span>big text</span>
</div>
<div class="box">
<span style="vertical-align:middle;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:top;">text</span><span>big text</span>
</div>
<div class="box">
<span style="vertical-align:bottom;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:text-top;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:text-bottom;">text</span><span >big text</span>
</div>

这是一个非常简单的解释,使用简单的措辞,请参阅规范以获得更准确和完整的解释。

Aram Becker 7 年前

正如它所说 here vertical-align 块级元素中。您的代码无法工作,因为div是这样一个块级元素。为了使代码工作,必须使用其他类型的元素。

达米安·佩拉尔塔用 table-cell 在你父母身上。另一个问题是你申请了 垂直对齐

所以你有两个选择:

1) 使用一些非块元素作为父元素并应用给父母

.parent{
  height:100px;
  background-color:red;
  vertical-align:middle;
  display: table-cell;
}
.text{
  background-color:green;
}

2) 或使文本元素更高:

.parent{
  height:100px;
  background-color:red;
}
.text{
  background-color:green;
  // You need to use line-height here because the height of inline elements cannot be changed
  line-height: 100px;
  vertical-align:middle;
}

-1

Saravana 7 年前

试试这个

.parent{
  height:100px;
  background-color:red;
  width:100%;
  display:table;
}
.text{
  vertical-align:middle;
  background-color:green;
  display:table-cell;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

-2

Wei-jye 7 年前

guidelines 非常有用。

我最喜欢使用flexbox技术,因为大多数时候我不想固定高度和宽度。