Where developers come to connect, share, build and be inspired.

168

New(?) way to center elements verticaly.

6469 views

Maybe new, maybe not, I don't know but I haven't seen it anywhere.

This technique is based on two inline-block elements with vertical-align set to middle. First one have set 100% height and second one is where we put content.

HTML:

<i class="inliner"></i>
<div>Sample content</div>

CSS:

.inliner {
    height: 100%;
}

.inliner,
.inliner + * {
    display: inline-block;
    vertical-align: middle;
}

You can play with it here: http://jsbin.com/oxuyop/919/edit

Comments

Add a comment