Verticle Align Example

by Emily Humphrey

HTML

<div class="ctn">
    <h2> default </h2>
    <div class="ele"></div>
    <div class="ele"></div>
    <div class="ele"></div>
</div>
<div class="ctn ctn-2">
    <h2> vertical-align:top </h2>
    <div class="ele"></div>
    <div class="ele"></div>
    <div class="ele"></div>
</div>
<div class="ctn ctn-3">
    <h2> vertical-align:middle </h2>
    <div class="ele"></div>
    <div class="ele"></div>
    <div class="ele"></div>
</div>
<div class="ctn ctn-4">
    <h2> vertical-align:bottom </h2>
    <div class="ele"></div>
    <div class="ele"></div>
    <div class="ele"></div>
</div>

CSS

.ctn{
    display:block;
    width:360px;
    padding-bottom:20px;
}
h2{
    font-family:sans-serif;
    font-size: 16px;
    color:#444;
    text-align:center;
}
.ele{
    display:inline-block;
    width:100px;
    height:100px;
    margin-right:16px;
    background:#ccc;
}
.ele:last-of-type{
    margin-right:0;
    height:150px;
}
.ctn-2 .ele{
    vertical-align:top;
}
.ctn-3 .ele{
    vertical-align:middle;
}
.ctn-4 .ele{
    vertical-align:bottom;
}