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

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

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

其他回答

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

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

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

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

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

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

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

这很好:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

没有和带有图像标记<mat icon>(这是一种字体)。

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>