如何在中间（垂直）对齐文本

Question

我现在已经苦苦挣扎了这么多小时，但仍然找不到解决方案。我制作了这个漂亮的网格，可以根据文本长度和浏览器大小进行调整。现在的问题是我无法让文本位于框的中间。

我什么都试过了。我使用了几个属性来实现这个，但没有任何效果。

text-align: center;
vertical-align: middle;
line-height: "same as div";

css代码：

.parent {
  text-align:center;
  margin:0px;
  width:100%;
  padding:0px;
  font-size:18px;
  color:#000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.child {
  padding:18px 25px;
  background: rgba(0, 0, 0, .5);
  list-style-type:none;
  width:inherit;
  margin:5px;

}

Answer 1

你试过了吗：

保证金：0 自动；

Answer 2

如果您不关心多行文本的 div 会根据实际文本内容调整高度，请在 child 元素上使用 height:100%。

如果您需要所有内容保持相同的高度，请添加

// Use any fixed value
    line-height: 50px;
    height: 50px;

如果在调整 window 大小时需要更改以像素为单位的固定高度，只需使用 javascript 更改 CSS 规则（如果使用此方法读取 this 首先不要在 window 更改时减慢您的客户端的速度）。

Answer 3

这是你想要的吗？

.parent {
    text-align:center;
    margin:0px;
    width:100%;
    padding:0px;
    font-size:18px;
    color:#000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

}

.child {
    position: relative;
    background: rgba(0, 0, 0, .5);
    padding:10px;
    list-style-type:none;
    width:inherit;
    align-items: center;
    justify-content: center;
    height:inherit;
    display: inline-flex;
    vertical-align: middle;
    margin:5px;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="parent">
    <div class="child"><span>sometext</span></div>
    <div class="child">somemoretext somemoretext</div>
    <div class="child">sometext</div>
    <div class="child">sometext</div>
</div>
<div class="parent">
    <div class="child">somemoretext somemoretext somemoretext somemoretext</div>
    <div class="child">sometext</div>
</div>
</body>
</html>

这是用 flex 作为你的 jsfiddle 完成的。你可以通过 "parent display table and vertical align middle" 和 "child display table cell and van middle" 删除你的 flex 样式来更轻松地做到这一点。

如何在中间（垂直）对齐文本

How to align text in middle (vertically)

html

css

alignment

vertical-alignment