vertical aling

by jamey777

HTML

<div class="wrapper">
    <div class="content">
        <a href="#"><img src="../../Content/img/document_chart_24.png" /></a>
        <p>One Line</p>
    </div>
</div>
<div class="wrapper">
    <div class="content">
        <a href="#"><img src="../../Content/img/document_chart_24.png" /></a>
        <p>Two Lines<br/>
        Two Lines<br/></p>
    </div>
</div>
<div class="wrapper">
    <div class="content">
        <a href="#"><img src="../../Content/img/document_chart_24.png" /></a>
        <p>Three Lines<br/>
            Three Lines<br/>
            Three Lines<br/></p>
    </div>
</div>
<div class="wrapper">
    <div class="content">
        <a href="#"><img src="../../Content/img/document_chart_24.png" /></a>
        <p>Four Lines<br/>
            Four Lines<br/>
            Four Lines<br/>
            Four Lines<br/>
        </p>
    </div>
</div>

CSS

.wrapper {
        width: 180px;
        border: solid 1px #ccc;
        float: left;
    }
    .content {
        padding: 0 0 0 30px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
        position: relative; /* So the thumbnail is relative to this */
        font-size: 2em;
        text-align: right;
    }

    .content a {
        left: 0;
        position: absolute;
        top: 0;
        line-height: 2em;
    }
    .content p {
        border: solid 1px green;
        line-height: 2em;
    }