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


当前回答

这些天(我们不再需要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>

其他回答

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

尝试嵌入表元素。

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

CSS:

.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的对象的元素中

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

根据Adam Tomat的回答,我们准备了一个JSFiddle示例来对齐div中的文本:

<div class="cells-block">    
    text<br/>in the block   
</div>

通过在CSS中使用display:flex:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

另一个例子和一篇博客文章中的一些解释。