【问题标题】: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 有一个方向(rowcolumn),属性align-itemsjustify-content 将项目与该方向垂直对齐。因此,如果方向是rowalign-items 是处理垂直对齐的属性,justify-content 处理水平对齐。

    其他选项:

    • vertical-align 用于表格单元格和内联内容,仅在某些情况下有效。
    • line-heightheight 组合在包含的对象上适用于其他场景。
    • 在要居中的项目上与 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>

        【讨论】:

          猜你喜欢
          • 2017-10-04
          • 2018-07-15
          • 2012-02-10
          • 2021-09-04
          • 2013-02-15
          • 2011-05-25
          相关资源
          最近更新 更多