html - 在垂直居中后水平居中跨度

Question

在经历了学习如何在 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;
}

Answer 1

您需要为 .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>