Richard Rodgers Richard Rodgers - 3 months ago 9
CSS Question

How do I center align a div within another div

I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"

Thanks in advance.



.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}

.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}

.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}

.plan:last-child {
float: right;
}

.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}

<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>




Answer

You can use inline-block instead of float, and than you can use the vertical-align property:

.plan-container>div{
  display: inline-block;
  vertical-align: middle;
}

JSFiddle

However, beware of the whitespace issue.

Comments