Keep text on the middle of an image

Question

I checked a few posts here and managed to keep the text align in the middle of my user's icon, the question here is: as you can see if his name is too long it goes to the other line. I was wondering if theres a way to reajust and keep the whole name in the middle of the icon?

Thanks in advance

enter image description here

here's my html:

<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>

and my css:

.chat-list > li.user {
    display: inline-table;
    height: 50px;
    margin-bottom: 5px;
    width: 100%;
}

.user span {
    display: inline-table;
    margin-left: 8px;
    width: 69%;
    word-break: normal;
}

I asked a similar question recently here: http://stackoverflow.com/questions/23961300/vertical-align-two-lines-of-text-with-image-bootstrap-3 — Dan, Sep 11 '14 at 13:54
I would just like to point out that you should close your image tag by using a slash at the end ie `` — Lee, Sep 11 '14 at 14:18

score 1 · Accepted Answer · answered Sep 11 '14 at 14:06

Try this

HTML:

<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>

CSS:

.chat-list > li.user {
    height: 50px;
    margin-bottom: 5px;
    width: 100%;
    display:block;
}
.user a {display:table;text-align:left;}
.user a img {display:table-cell;width:50px;}
.user span {
    display: table-cell;
    margin-left: 8px;
    width: 69%;
    word-break: normal;
    vertical-align:middle;
}

JSFiddle: http://jsfiddle.net/jdfx/La996vye/

TL:DR - Set the parent to display:table, and set the children as display:table-cell then add vertical-align:middle to your span.

score 1 · Answer 2 · answered Sep 11 '14 at 14:07

I have done something similar on my website and solved it by applying this to the text:

span { 
    display:table-cell;
    vertical-align:middle;
}

For this to work your parent tag needs to be shown as a table so:

a {
    display:table;
}

http://jsfiddle.net/gk2dfngc/

Keep text on the middle of an image

2 Answers2