How can I vertically align HTML text with the center of an image?

Question

How can I make my image in the center of the image?

I have put red boxes where I'd like the text to go, as shown in this image:

HTML

<img src="http://media.steampowered.com/steamcommunity/public/images/avatars/ef/ef866067efc58dc49c7de0a39622eb5d7b6532bd_medium.jpg" />
<span class="target">
    <b> <a href="#"/>'Mouse'</a></b> - ' . Mouse . '<br />
</span>

CSS

span.target{
    display:inline;
}

@user2417012 please paste your code here or use [JSFIDDLE](http://jsfiddle.net/) — Praveen, May 24 '13 at 09:49
http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css — Bongs, May 24 '13 at 09:51
@user2417012: Please edit and reformat your question as it's not clear what problem you are facing. — Mantra, May 24 '13 at 09:52
@DivTiwari Its not my question. Have you mentioned wrong username? — Praveen, May 24 '13 at 09:55
"vertical-align:middle;" on the image fixed it. Thanks for the help — user2417012, May 24 '13 at 09:56
@user2417012 I've edited your question into something close to what it should be. Take note of this in the future - your original post was of very poor quality — Bojangles, May 24 '13 at 10:43
@Bojangles: please mind your language. I commented because many of my answers though they were correct and accepted by user are not marked as correct, may be because the users were new and not knowing the things like here. Anyways thanks for your comment i'll take it to account and +1 for your edit. — Mantra, May 24 '13 at 11:01

michael · Answer 1 · 2013-05-24T13:23:15.383

1

Use vertical-align

http://jsfiddle.net/hrvmG/3/

HTML

<p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/64px-Smiley.svg.png" />
    Curabitur ligula non lectus.
</p>
<p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/64px-Smiley.svg.png" />
    Curabitur ligula non lectus.
</p>

CSS

img {
    vertical-align: middle;
}

edited May 24 '13 at 13:23

answered May 24 '13 at 09:52

michael

4,427
6
38
57

user2198137 · Answer 2 · 2013-05-24T11:58:13.730

IN CSS
=================
.comtent img
{
    height:200px;
    width:200px;
    float:left;
    margin-right:20px;
}
.comtent p
{
    height: 200px;
    width:200px;
    margin: 0;
        display: table-cell;
    vertical-align: middle;
}


IN HTML
==================
<div class="comtent">
    <img src="image/App_Sec2.jpg" alt=""/>
    <p>
        text to be sit in the middle
        text to be sit in the middle        
    </p>
</div>

score 0 · Answer 3 · answered May 24 '13 at 09:51

0

You could use style="vertical-align:middle;" on Image and Text. You may need to set the line-height too.

answered May 24 '13 at 09:51

DasBaconfist

606
6
14

score 0 · Answer 4 · answered May 24 '13 at 09:54

0

this should work

<img src=".gif" align="middle"> //The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead)


<img src=".gif" style="vertical-align:middle;"> //css

answered May 24 '13 at 09:54

konnection

433
4
13

score 0 · Answer 5 · answered May 24 '13 at 10:18

try this.. make your html like this.

<img src="http://media.steampowered.com/steamcommunity/public/images/avatars/ef/ef866067efc58dc49c7de0a39622eb5d7b6532bd_medium.jpg" />
<span class="target">
   <b> <a href="#">'Mouse'</a></b> - ' . Mouse . '<br />
</span>

make your css like this

span.target{
display:inline;
}
img{vertical-align:middle;}

score 0 · Answer 6 · answered May 24 '13 at 10:37

Assuming the size of the picture is constant, you could try:

<div class="item">
    <img src="..." alt=""/>
    <p>
        text to be sit in the middle
    </p>
</div>

CSS:

.item img
{
    height:100px;
    width:100px;
    float:left;
}
.item p
{
    display: table-cell;
    height: 100px;
    margin: 0;
    vertical-align: middle;
}

How can I vertically align HTML text with the center of an image?

6 Answers6