垂直对齐此文本我缺少啥？ [复制]

Posted 2023-03-05

【中文标题】垂直对齐此文本我缺少啥？ [复制]

【英文标题】：What am I missing to vertically align this text? [duplicate]垂直对齐此文本我缺少什么？ [复制]

【发布时间】：2018-02-15 05:40:24

【问题描述】：

我可以将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;

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>

【问题讨论】：

Flexbox 一个选项？

【参考方案1】：

您可以像这样使用psuedo 元素：

.content:after 
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;

请看下面的演示：

.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;

.content:after 
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>

【讨论】：

这很完美，你能解释一下它为什么/如何工作吗？

处理 inline 元素时垂直居中的 hacks 之一...

对我来说已经足够好了！ :)