Html 如何使文本垂直居中？ 我用Bootstrap卡做我的反应项目，努力让文本在中间垂直对齐。这就是我到目前为止所尝试的，如何纠正它

setsymbol（element.symbol）}to={“/chart/”+element.symbol}>
{element.symbol}
{“%”+上半部分+“+下半部分}

在

.card

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

setsymbol（element.symbol）}to={“/chart/”+element.symbol}>
{element.symbol}
{“%”+上半部分+“+下半部分}

您可以试试

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

然后

//您的上述代码

.card{
高度：50px；
宽度：150px；
背景颜色：绿色；
文本对齐：居中；
显示：表格；
}
.卡p{
垂直对齐：中间对齐
显示：表格单元格；
}

我是中锋

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


#支架{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
高度：200px；
背景颜色：绿色
}


span1
span2
span3

它使事情变得非常有趣，使它水平地居中。
 .myauto {
    margin-top: auto;
    margin-bottom: auto;
 }

  <div class="myauto">

           // your above code

  </div>