如何使文本垂直居中？ [复制]答案

【问题标题】：How to center the text vertically? [duplicate]如何使文本垂直居中？ [复制]
【发布时间】：2021-07-10 03:07:19
【问题描述】：

我正在为我的 React 项目使用引导卡，并且努力使文本在中间垂直对齐。这是我目前尝试过的，如何纠正？

<div key={element.symbol} className="card text-white bg-success" style={{ width: "25rem", margin: 10, paddingLeft: 2, paddingTop: 2, }}>
            <Link style={{ color: 'white', textAlign: 'center', justifyContent: 'center' }} onClick={() => setsymbol(element.symbol)} to={"/chart/" + element.symbol}>
              <span style={{ float: 'left' }} >{element.symbol}</span>
              <span style={{ float: 'right' }}>{"%" + firstHalf + "." + secondHalf}</span>
            </Link>
          </div>

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

获得完美垂直对齐的最佳、最简单、最通用和最新的方法是使用 flexbox 和 flex 属性。

#holder {
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  height: 200px; 
  background-color: green
}

<div id="holder">
  <p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
  </p>
</div>

flexbox 有一个方向（row 或column），属性align-items 和justify-content 将项目与该方向垂直对齐。因此，如果方向是row，align-items 是处理垂直对齐的属性，justify-content 处理水平对齐。

其他选项：

vertical-align 用于表格单元格和内联内容，仅在某些情况下有效。
line-height 和 height 组合在包含的对象上适用于其他场景。
在要居中的项目上与 position: absolute 组合，以及 transform: translateY(-50%) 和 top: 50% 也可能在其他情况下起作用。

...但最简单、最通用的方法是使用 flexbox！

参考资料：

flex

【讨论】：

【解决方案2】：

在.card上添加这个类d-flex align-items-center

<div key={element.symbol} className="card text-white bg-success d-flex align-items-center" style={{ width: "25rem", margin: 10, paddingLeft: 2, paddingTop: 2, }}>
            <Link style={{ color: 'white', textAlign: 'center', justifyContent: 'center' }} onClick={() => setsymbol(element.symbol)} to={"/chart/" + element.symbol}>
              <span style={{ float: 'left' }} >{element.symbol}</span>
              <span style={{ float: 'right' }}>{"%" + firstHalf + "." + secondHalf}</span>
            </Link>
          </div>

【讨论】：

这让事情变得更糟
它使它们在中间水平居中..

【解决方案3】：

你可以试试

 .myauto {
    margin-top: auto;
    margin-bottom: auto;
 }

然后

  <div class="myauto">

           // your above code

  </div>

【讨论】：

【解决方案4】：

.card{
height : 50px;
width : 150px;
background-color : green;
text-align: center;
display: table;

}


.card p {
vertical-align : middle
display: table-cell;
}

<div class="card">

<p> i am center </p>

</div>

【讨论】：