如何在div中垂直对齐文本？

我正在尝试找到最有效的方法来将文本与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>

当前回答

一个不知道价值的简单解决方案：

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

2016-09-21 13:53:36

其他回答

您可以通过将显示设置为“表格单元格”并应用垂直对齐：middle；：

    {
        display: table-cell;
        vertical-align: middle;
    }

然而，根据我从中复制的摘录，这并非所有版本的Internet Explorer都支持http://www.w3schools.com/cssref/pr_class_display.asp未经许可。

注意：Internet Explorer 7和更早版本不支持值“内联表”、“表”、表标题、表单元格、表列、表列组、表行、表行组和继承”。Internet Explorer 8需要！DOCTYPE。Internet Explorer 9支持这些值。

下表显示了允许的显示值http://www.w3schools.com/cssref/pr_class_display.asp.

2012-04-18 15:15:51

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

2020-11-11 11:00:09

<!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>

2017-03-17 05:07:01

我使用以下方法轻松地将随机元素垂直居中：

HTML格式：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这将使我的div中的文本位于200px高的外部div的垂直中间。请注意，您可能需要使用浏览器前缀（如我的例子中的-webkit）来使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

2014-01-24 14:11:06

一个不知道价值的简单解决方案：

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

2016-09-21 13:53:36

如何在div中垂直对齐文本？

推荐文章

最新文章

标签