1. ホーム
  2. 質問と答え
  3. テキストDIVでの垂直方向の整列

テキストDIVでの垂直方向の整列

2017-07-14 21 views
-1

すべての画面解像度で垂直方向の中央にテキストを配置する必要があります。テキストDIVでの垂直方向の整列

誰でもお勧めできますか？

enter image description here

出典

2017-07-14 Raj

+0

共有コード... – Santhoshkumar

+0

[リンク] https://jsfiddle.net/gkc2xg11/ – Raj

+0

現在、私はパディングと最小高さのプロパティを使用しています。しかし、アライメントは各解像度で異なります – Raj

答えて

1

てみてください、次のコード

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

出典

2017-07-14 11:18:09 Santhoshkumar

1

あなたはアイテムを揃えるためにフレキシボックスを使用することができます。

display: flex; 
    align-items: center; 
    justify-content: center;
ここ

全例：codepen

出典

2017-07-14 11:16:08 hairmot

関連する問題

 関連する問題