Question

基本上，我想在中间对齐这些项目。这是我想要在中间垂直对齐的三个项目。我尝试过垂直对齐：中间，但它不起作用..我不喜欢位置：绝对的。

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/

Answer 1

我对你的CSS进行了一些更改，这是使用table / table-cell模式。它非常酷，因为它可以处理任何大小的内容，而不会使用边距/填充来破解它。你可以调整＆lt; .info＆gt;的高度来看看我的意思。

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

主要区别是：

pthread_cond_signal()

我还删除了一些你的黑客边缘！

Answer 2

将框的css样式更改为

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

Answer 3

使用 flex-direction：列

更多示例使用此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">
					<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>

如何在中间垂直对齐方框

3 个答案: