我错过了什么，以使这段文本垂直对齐？

11 浏览
0 Comments

我错过了什么，以使这段文本垂直对齐？

我可以将line-height设置为85px来实现垂直居中，但我并不总是知道元素的高度。我确定我在这里漏掉了一些简单的东西...但我可以修改.content类中的哪些属性来使文本垂直居中？

.tile {
  position: relative;
  width: 100px;
  height: 85px;
  display: inline-block;
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#container2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  margin: auto;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

    测试

0

1 答案

0 Comments

这段代码中使用了伪元素来实现垂直居中对齐文本的效果。这是一种在处理inline元素时垂直居中的方法。具体解决方法是在.content类选择器下添加一个伪元素.content:after，设置其display属性为inline-block，height属性为100%，vertical-align属性为middle。这样就可以使.content元素垂直居中对齐。

原因是在HTML中，垂直居中对齐文本是一个常见的需求，但是在处理inline元素时，很难实现这个效果。这段代码中使用的方法是通过添加一个伪元素来实现垂直居中对齐文本的效果。

这种方法的原理是将伪元素.content:after作为一个占位元素，设置其高度为100%，然后通过设置其display属性为inline-block和vertical-align属性为middle来使其垂直居中对齐。这样就可以实现文本在容器中垂直居中对齐的效果。

这种方法是一种常用的hack方法，在处理inline元素时实现垂直居中对齐的效果。虽然不是一种最理想的解决方案，但在某些情况下仍然可以使用。

总结起来，这段代码通过添加一个伪元素来实现垂直居中对齐文本的效果。这种方法可以解决在处理inline元素时垂直居中对齐的问题。虽然不是最理想的解决方案，但在某些情况下仍然可以使用。

0