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


当前回答

Use:

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

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

其他回答

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

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

使用flex时,请注意浏览器渲染的差异。

这对Chrome和Internet Explorer都很有效:

.外部{显示:柔性;宽度:200px;高度:200px;背景色:#ffc;}.内部{显示:柔性;宽度:50%;高度:50%;边距:自动;文本对齐:居中;对齐内容:中心;对齐项目:居中;背景色:#fcc;}活动任务</div></div>

与仅适用于Chrome的这款相比:

.外部{显示:柔性;宽度:200px;高度:200px;背景色:#ffc;}.内部{显示:柔性;宽度:50%;高度:50%;边距:自动;背景色:#fcc;}<div class=“outer”>活动任务</span></div></div>

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

您可以使用显示网格并将项目放置在中心:

.容器{宽度:200px;高度:200px;边框:纯红色;显示:栅格;放置项目:中心;}<div class=“container”>Lorem,ipsum dolor。</div>

这里有一个最适合单行文本的解决方案。

如果知道行数,它还可以对多行文本进行一些调整。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

这是一个JSFiddle。