Question

经过漫长的学习如何在div中垂直居中的过程之后，尽管设置了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

您需要为width定义.blurb_title属性，因为任何没有指定宽度的表格单元格都会获得其内容的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用Flex-box：

public void drawFixationsOnFrame(GazeData gazeData){

    Graphics g = this.panelForImages.getGraphics();


    g.drawString("TEsting 123", (int)gazeData.smoothedCoordinates.x, (int)gazeData.smoothedCoordinates.y);

    g.dispose();

    jF.revalidate();
}

Answer 3

请注意，如果未指定width属性或设置为100％

，则中心对齐不起作用

Answer 4

按照参考资料CSS Flex-box和CSS Centering Things

进行操作

您也可以使用CSS Flex-box（我的推荐）

display: flex; align-items: center; justify-content: center;

＆＃13;

.blurb_title {
    border: 1px solid green;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

＆＃13;

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

＆＃13;

在垂直居中后水平居中

4 个答案: