我如何垂直對齊中間的框

基本上，我想在中間對齊這些項目。這是我想要在中間對齊的三個項目，垂直。我試過垂直對齊：中間，但它沒有工作..我不喜歡位置：絕對壽。我如何垂直對齊中間的框

HTML

`  <div class="info"> 
       <div class="box"> 
       <div class="cont"> 
        <img src="http://lorempixel.com/400/200/sports/1/"> 
        <h5>lorem lorem</h5> 
        <p>88</p> 
        </div> 
       </div> 

       <div class="box"> 
       <div class="cont"> 
        <img src="http://lorempixel.com/400/200/sports/1/"> 
        <h5>lorem lorem</h5> 
        <p>88</p> 
        </div> 
       </div> 

       <div class="box"> 
       <div class="cont"> 
        <img src="http://lorempixel.com/400/200/sports/1/"> 
        <h5>lorem lorem</h5> 
        <p>88</p> 
        </div> 
       </div> 

       <div class="box"> 
       <div class="cont"> 
        <img src="http://lorempixel.com/400/200/sports/1/"> 
        <h5>lorem lorem</h5> 
        <p>88</p> 
        </div> 
       </div> 
      </div>

CSS

.info{ 
width:100%; 
height:50vw; 
background-color: #FFAE00; 
margin-top:0; 
display: flex; 
text-align: center; 


} 
.box h5{ 
    font-size: 2vw; 


} 
.box{ 
    width:25%; 
    height:100%; 
    display: inline-block; 
    margin-top:3vw; 

} 
.box img{ 
    width:7vw; 
    height:7vw; 

} 
.box p{ 
    font-size: 6vw; 
}

FIDDLE：https://jsfiddle.net/5Lstx44y/框中

來源

2017-05-27 MA A

我做了一些改變你的CSS，這是使用表/表單元格圖案。這非常酷，因爲它可以處理任何大小的內容，而不會使用邊距/填充黑皮膚。你可以調整<.info>的高度來看看我的意思。

以下是更新版本：https://jsfiddle.net/x5rdLgv2/

主要區別是：

.box { 
    display: table; 
} 

.cont { 
    display: table-cell; 
    vertical-align: middle; 
}

我還刪除了一些被黑客入侵的利潤率！

來源

2017-05-27 04:27:51 hellojebus

Legend fam，you mvp –

更改CSS樣式

.box { 
    width: 25%; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
    padding-top: 25%; //Increase or Decrease as your need. 
}

來源

2017-05-27 04:17:24 AdhershMNair

是的，但在移動設備上它跳得很低，我希望它保持在位置 –

使用彎曲方向：列

更多的例子中使用這個link

.info{ 
 
width:100%; 
 
height:100vh 
 
background-color: #FFAE00; 
 
margin-top:0; 
 
display: flex; 
 
text-align: center; 
 
    
 
flex-direction:column; 
 
} 
 
.box h5{ 
 
    font-size: 2vw; 
 

 

 
} 
 
.box{ 
 
    
 
    margin-top:3vw; 
 
    
 
} 
 
.box img{ 
 
    width:7vw; 
 
    height:7vw; 
 

 
} 
 
.box p{ 
 
    font-size: 6vw; 
 
}

<div class="info"> 
 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t <div class="cont"> 
 
\t \t \t \t \t \t <img src="http://lorempixel.com/400/200/sports/1/"> 
 
\t \t \t \t \t \t <h5>lorem lorem</h5> 
 
\t \t \t \t \t \t <p>88</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t <div class="cont"> 
 
\t \t \t \t \t \t <img src="http://lorempixel.com/400/200/sports/1/"> 
 
\t \t \t \t \t \t <h5>lorem lorem</h5> 
 
\t \t \t \t \t \t <p>88</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t <div class="cont"> 
 
\t \t \t \t \t \t <img src="http://lorempixel.com/400/200/sports/1/"> 
 
\t \t \t \t \t \t <h5>lorem lorem</h5> 
 
\t \t \t \t \t \t <p>88</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t <div class="cont"> 
 
\t \t \t \t \t \t <img src="http://lorempixel.com/400/200/sports/1/"> 
 
\t \t \t \t \t \t <h5>lorem lorem</h5> 
 
\t \t \t \t \t \t <p>88</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
     \t \t \t </div>

來源

2017-05-27 04:20:15

我如何垂直對齊中間的框

回答

相關問題