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

当前回答

有一种更简单的方法可以垂直对齐内容，而无需诉诸表格/表格单元格：

http://jsfiddle.net/bBW5w/1/

在其中，我添加了一个不可见的（width=0）div，它假设容器的整个高度。

它似乎可以在Internet Explorer和Firefox（最新版本）中使用。我没有检查其他浏览器

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

当然，CSS：

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

2014-05-25 20:42:21

其他回答

Flexbox非常适合我，将父div中的多个元素水平和垂直居中。

下面的代码将父div内的所有元素堆叠在一列中，并将元素水平和垂直居中。我使用子div将两个Anchor元素保持在同一行（行）上。在没有子div的情况下，所有三个元素（Anchor、Anchor和Paragraph）都堆叠在父div的列中。这里只有子div堆叠在父div列中。

.父div{高度：150px；显示：柔性；弯曲方向：柱；对齐内容：中心；背景：粉色；}<div class=“parent div”><div class=“child div”><a class=“footer link”href=“https://www.github.com/“>GitHub</a><a class=“footer link”href=“https://www.facebook.com/“>脸书</a><p class=“footer copywrite”>©2019 Lorem Ipsum</p＞</div></div>

2019-10-31 06:56:13

您可以使用Flexbox在div内垂直对齐中心文本。

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

您可以在Flexbox完整指南中了解更多信息。

2016-12-21 02:39:58

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

但我有一个绝对定位的＜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

非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

输出：

谢谢你提出这个问题。很高兴分享。

2022-10-19 17:04:05