Hopstream Hopstream - 1 year ago 62
CSS Question

How to middle align two inner divs inside a container?

I've been trying to achieve the following:

enter image description here

Note: The dashed line is just a guide showing that

.inner-a
and
.inner-b
are both horizontally and vertically middle aligned to an imaginary split of
.outer
down the middle.

Is this possible using just CSS? Or would it need some javascript to achieve?

Here is what I have till now:

HTML

<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>


CSS

.outer {
width: 300px;
height: 300px;
}
.inner-a, inner-b {
width: 100px;
height: 100px;
}
.inner-a {
float:left;
}
.inner-b {
float: right;
}

Answer Source
.outer { display: inline-flex; align-items: center; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download