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


当前回答

我使用以下方法轻松地将随机元素垂直居中:

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)来使其适用于您的浏览器。

这不仅适用于文本,也适用于其他元素。

其他回答

这是在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%-一半

我使用以下方法轻松地将随机元素垂直居中:

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)来使其适用于您的浏览器。

这不仅适用于文本,也适用于其他元素。

Use:

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

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

使用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>

如果需要与min-height属性一起使用,则必须将此CSS添加到:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}