CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Align text vertically next to image

How do I align my block of text vertically centrered with my image so my text appears in the middle, yet to the side?

My JSFiddle.

<div class="avatar">
    <img src="http://placehold.it/50x50">
    <div>
        <span>MyAvatar.jpg</span>
        Avatars should be no bigger than 200x200px
    </div>
</div>

Thank you for any help

Upvotes: 1

Views: 67

Answers (2)

user3171894
user3171894

Reputation:

try this 

body {font-size:12px}

.avatar {
    display:table;

}
.avatar div
{
    display:table-cell;
    vertical-align: middle
    }

.avatar span {
    display:block;
    font-weight:bold;
}

.avatar img {

    margin-right:20px;
    display:table-cell;

}

http://jsfiddle.net/da08ayLd/2/

Upvotes: 3

pavel
pavel

Reputation: 27092

Use display: table and vertical-align.

.avatar {
    display: table;
}

.avatar div {
    display: table-cell; 
    vertical-align: middle;
}

http://jsfiddle.net/da08ayLd/1/

Upvotes: 2

Related Questions