[英]Text Vertical Alignment on DIV
嘗試以下代碼
.textBox{display: flex;align-items: center;justify-content: center;} .cont-bx1{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx2{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx3{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx4{background-color:#df6221; color:#ffffff; text-aligncenter; min-height:200px; font-weight:bold; border: 1px solid #ffffff; } .cont-bx5{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx6{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx7{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;} .cont-bx8{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
<div class="col-lg-12"> <div class="col-lg-4 cont-bx1 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="col-lg-4 cont-bx2 textBox">Lorem ipsum dolor sit amet, consectetur</div> <div class="col-lg-4 cont-bx3 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div> </div> <div class="col-lg-12"> <div class="col-lg-6 cont-bx4 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="col-lg-6 cont-bx5 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div> </div> <div class="col-lg-12"> <div class="col-lg-4 cont-bx6 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="col-lg-4 cont-bx7 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div> <div class="col-lg-4 cont-bx8 textBox">Lorem ipsum dolor sit amet</div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.