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

当前回答

尝试嵌入表元素。

＜div＞<table style='width:200px；高度：100px；'><td style='vertical-align:middle；'>哥本哈根</td></table></div>

2014-01-17 23:57:18

其他回答

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

源代码

.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

这些天（我们不再需要InternetExplorer6-8），我只会使用CSS display:table（或display:flex）来解决这个问题。

表：.vcenter（.v中心）{显示：表格；背景：#eee；/*可选的*/宽度：150px；高度：150px；文本对齐：居中；/*可选的*/}.vcenter>：第一个子级{显示：表格单元格；垂直对齐：中间；}<div class=“vcenter”><p>这是我的文本</p></div>

弯曲：.vcenter（.v中心）{显示：柔性；对齐项目：居中；高度：150px；对齐内容：中心；/*可选的*/背景：#eee；/*可选的*/宽度：150px；}<div class=“vcenter”><p>这是我的文字</p></div>

对于较旧的浏览器：

这是（实际上是）我最喜欢的解决方案（简单且非常受浏览器支持）：

第二部分{边距：5px；文本对齐：居中；显示：内联块；}.vcenter（.v中心）{背景：#eee；/*可选的*/宽度：150px；高度：150px；}.vcenter:之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；最大宽度：0.001%；/*为了防止文本换行，你不应该注意到它*/}.vcenter>：第一个子级{显示：内联块；垂直对齐：中间；最大宽度：99.999%；}<div class=“vcenter”><p>这是我的文字</p></div><div class=“vcenter”><h4>这是我的文本<br/>文本</br/>文本</h4></div><div class=“vcenter”>＜div＞<p>这是我的</p><p>文本</p></div></div>

2014-09-15 17:54:25

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

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

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

Use:

h1小时{边距：0；位置：绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）；}.容器{高度：200px；宽度：500px；位置：相对；边框：1px实心#eee；}<div class=“container”><h1>垂直对齐文本</h1></div>

使用此技巧，如果您不想使其居中，可以对齐任何对象。添加“left:0”以向左对齐。

2018-05-15 20:00:36

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

推荐文章

最新文章

标签