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

Question

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

7

我已经花费了很多时间，但仍然无法找到解决方案。我制作了一个漂亮的网格布局来自适应文本长度和浏览器调整大小。问题现在是我无法使文本居中于盒子中央。

我尝试了各种方法.. 使用了多种属性来实现这一点，但什么都没有用。

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;

}

- justme

快速简单：使用flexbox垂直居中 - https://dev59.com/bGMk5IYBdhLWcg3wtgMR#33049198 - Michael Benjamin

3个回答

2

如果您不介意带有多行文本的div根据实际文本内容调整其高度，请在子元素上使用height:100%。

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

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

如果您需要在窗口大小调整时更改固定高度（以像素为单位），只需使用JavaScript更改CSS规则即可（如果使用此方法，请先阅读此内容，以避免当窗口大小更改时减慢客户端速度）。

- Clemens Himmer

1

你尝试过吗：

margin:0 auto;

- leham789

你能把你要对齐的HTML代码发给我吗？这样我就可以自己尝试一下了，谢谢。 - leham789

在这个链接上，文本位于盒子的中间？！ - leham789

在链接中，我添加了第二个文本框，导致其他文本框的高度增加。因此，其他文本框中的文本仍停留在顶部，没有居中显示，所以我正在尝试解决问题，但是我已经想不出来了。 - justme

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vinc · Accepted Answer

Is this what you want?

.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 示例一样。您还可以更轻松地使用 "父元素 display: table 和垂直居中" 以及 "子元素 display: table-cell 和垂直居中" 来实现，同时移除掉 flex 样式。