在经历了学习如何在 div 中垂直居中 span 的漫长过程之后,最后,尽管设置了 text-align: center,但我的文本内容不再水平居中。另外,非常奇怪的是,只有当跨度内的文本换行到第二行时,水平居中才起作用。
enter code here
<div class="tier_blurb dh">
<div class="blurb_title">
<span>Assign ownership</span>
</div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
.blurb_title {
text-align: center;
vertical-align: middle;
text-transform: uppercase;
font-weight: 700;
font-size: 0.95em;
letter-spacing: -1px;
margin-bottom: 10px;
height: 43px;
display: table-cell;
}
.blurb_title span {
vertical-align: middle;
}
最佳答案
您需要为 .blurb_title
定义 width
属性,因为任何没有指定宽度的表格单元格都将获得其内容的宽度。
.blurb_title {
vertical-align: middle;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 0.95em;
letter-spacing: -1px;
margin-bottom: 10px;
height: 43px;
display: table-cell;
border: 1px solid green;
width: 100vw;
}
<div class="tier_blurb dh">
<div class="blurb_title">
<span>Assign ownership</span>
</div>Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
关于html - 在垂直居中后水平居中跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41567525/