我正在尝试找到最有效的方法来将文本与div对齐。我尝试了一些方法,但似乎没有一个有效。

.推荐文本{位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中;字体系列:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>


当前回答

使用CSS网格为我做到了:

.外部{背景色:灰色;宽度:10rem;高度:10rem;显示:栅格;对齐项目:中心;}.内部{背景色:#FF8585;对齐自身:中心;}<div class='outer'><div class='inner'>所容纳之物</div></div>

其他回答

在现代浏览器中,正确的方法是使用Flexbox。

有关详细信息,请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。


CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要:

对于CSS2浏览器,可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例:

div{border:1px实心绿色;}<div style=“display:table;height:400px;溢出:隐藏;”><div style=“display:表格单元格;垂直对齐:中间;”><div>在现代IE8+和其他版本中,一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器(Internet Explorer 6/7)的黑客行为合并到样式中,以隐藏新浏览器的样式:

div{border:1px实心绿色;}<div style=“display:table;height:400px;#position:relative;overflow:hidden;”><div样式=“#位置:绝对;#顶部:50%;显示:表格单元格;垂直对齐:中间;”><div style=“#position:relative;#top:-50%”>一切都是垂直居中的</div></div></div>

您可以使用css flexbox。

.推荐文本{高度:500px;填充:1em;显示:柔性;对齐项目:居中;对齐内容:中心;边框:1px实心#b4d2d2;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>

您需要添加line-height属性,该属性必须与div的高度匹配。在您的情况下:

.中心{高度:309px;线条高度:309px;/*与高度相同*/}<div class=“center”>一行。</div>

实际上,您可能可以完全删除高度属性。

这只适用于一行文本,所以要小心。

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

HTML格式:

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS:

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}