CODEWITHSUNDEEP
htmlcssalignment
Gullit
Gullit

Reputation: 147

how do I vertically align boxes in middle

Basically, i would like to align these items in the middle. It's three items that i want to align in the middle, vertically. I've tried vertical align: middle, but it didn't work.. I don't prefer position:absolute tho.

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/

Upvotes: 0

Views: 147

Answers (3)

hellojebus
hellojebus

Reputation: 3603

I made a few changes to your CSS, this is using the table/table-cell pattern. It's pretty cool cause it will work with any size content without hacking it with margins/padding. You can adjust <.info>'s height to see what I mean.

Here is the updated version: https://jsfiddle.net/x5rdLgv2/

Main differences are:

.box {
  display: table;
}

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

I also removed some of your hacked margins!

Upvotes: 1

Dinesh undefined
Dinesh undefined

Reputation: 5546

Use flex-direction:column

for more example use this 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>

Upvotes: 0

Adharsh M
Adharsh M

Reputation: 2812

Change css style for box to 

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

Upvotes: 0

Related Questions