亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何垂直對齊容器中的文本

如何垂直對齊容器中的文本

忽然笑 2023-05-19 14:38:19
我在這個論壇上搜索了很長時間,但找不到任何可以回答我問題的東西。我有一個有兩個并排部分的容器。我希望左側的文本根據右側容器的高度在其容器中垂直對齊中心。我使用了 my-auto、m-auto 和其他幾個 bootstrap css 類,還有一些我自定義的類,但它們似乎都不起作用。請參閱附加代碼以了解(在整個頁面中打開或展開代碼段以便您可以并排查看各部分)<!DOCTYPE html><html><head>  <!-- CSS -->  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"></head><body>  <div>    <div class="container-fluid">      <div class="row">        <div class="col-md-6 bg-light">          <div class="m-auto p-5">            <h2>Content that needs to be vertically aligned</h2>          </div>        </div>        <div class="col-md-6 bg-primary">          <div class="ml-5 space-top-2 space-bottom-2 pr-10">            <div class="container">              <div class="row space-bottom-2">                <div class="col-md-3">                </div>                <div class="col-md-9">                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas leo laoreet nunc congue, at venenatis risus tristique. Suspendisse ac augue metus. Donec finibus velit at accumsan tristique. Sed eu sapien sed purus fringilla                    pretium. Curabitur ac nisl at massa vulputate hendrerit eget non urna. Praesent nec turpis vitae velit semper efficitur. Nullam a diam rutrum, venenatis nisl sit amet, placerat felis. Nullam semper, augue ut vestibulum venenatis, quam                    tellus ornare enim, ut mattis nibh ante vitae dui. Nunc elementum, sem at aliquet vulputate, ipsum tellus volutpat arcu, ut imperdiet orci turpis sit amet velit. Sed et eros nec ipsum sagittis scelerisque vel at urna. Nunc ante lacus,                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div></body></html>
查看完整描述

4 回答

?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

通過在css中使用flex,我們可以實現這一點。

<div class="col-md-6 bg-light h-100 d-flex align-items-center justify-content-center">

在這里,align-items-center使文本垂直居中并使justify-content-center文本水平居中。


查看完整回答
反對 回復 2023-05-19
?
qq_遁去的一_1

TA貢獻1725條經驗 獲得超8個贊

將其粘貼到您的 css 文件中...


.col-md-6 {

    margin-top: auto;

    margin-bottom: auto;

  }


查看完整回答
反對 回復 2023-05-19
?
桃花長相依

TA貢獻1860條經驗 獲得超8個贊

只需添加:


.col-md-6{

  display: flex;

}


查看完整回答
反對 回復 2023-05-19
?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

您可以CSS grid為此使用place-item。它將垂直/水平對齊您的文本。


.parent {

    display: grid;

    place-items: center;

    

    /* meaningless styling */

    width: 200px;

  height: 200px;

  background: lightblue;

    resize: both;

  overflow: auto;

  }

  <div class="parent" >

  <div class="box">Centered text.</div>

  </div>


查看完整回答
反對 回復 2023-05-19
  • 4 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號