如何在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>

当前回答

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

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

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

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

2011-02-06 19:21:23

其他回答

这是在CSS中使用calc（）的div模式中div的另一种变体。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

这是有效的，因为：

position:absolute用于在div中精确放置div我们知道内部div的高度，因为我们将其设置为20px。计算（50%-10px），用于对中内隔板高度的50%-一半

2014-07-31 09:38:23

嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的＜div＞，高度：100%（实际上，顶部：0；底部：0，固定宽度），显示：表格单元格无法垂直居中文本。我的解决方案确实需要内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字在其中垂直居中。我这样做是通过将绝对位置放在顶部：50%，并设置行高度：0

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行动中看到：http://jsfiddle.net/jcward/7gMLx/

2014-04-04 19:00:30

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

2014-08-25 08:59: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

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

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

推荐文章

最新文章

标签