Vertically align text and image

Question

I know this is duplicate but sorry as solution given on other post seems not working for me or I didn't got them correctly.

I need to vertically align text and image to middle. Tried CSS property vertical-align:middle but it seems, is not working. My code is given at JSFiddle and as follow

<div class="picacollinvitecoll">
    <span>Other Collaborators:</span>
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
    <img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
</div>

CSS properties are

.picacollinvitecoll span{
    margin:0;
}
.picacollinvitecoll img{
    margin-top: 3px;
}

I'm getting output as shown on JSFiddle, which is aligned at the bottom. Can someone please update JSFiddle to make it align at 'middle'.

check this post [vertical align img], [1]: http://stackoverflow.com/questions/5021676/vertical-align-img-and-text-within-li — NoNaMe, Sep 05 '12 at 07:18
@Kapil Sharma Do you want the image aligned relative to the text or the whole lot aligned relative to the container? — lpd, Sep 05 '12 at 07:31
Yes I wanted them relatively aligned. Got the ans. Thanks (+1) to everyone for timely help. — Kapil Sharma, Sep 05 '12 at 07:56

score 3 · Accepted Answer · answered Sep 05 '12 at 07:16

3

You are looking for CSS vertical-align:middle

See here

answered Sep 05 '12 at 07:16

Lucas Green

3,951
22
27

score 3 · Answer 2 · answered Sep 05 '12 at 07:18

3

You need to add vertical-align: middle; to both of the selectors (if I understand you correctly)

http://jsfiddle.net/Kyle_Sevenoaks/mbhLN/

answered Sep 05 '12 at 07:18

Kyle

65,599
28
144
152

score 2 · Answer 3 · answered Sep 05 '12 at 07:20

2

Use display:table for the parent div

Check the demo here http://jsfiddle.net/zcaT3/10/

answered Sep 05 '12 at 07:20

Sowmya

26,684
21
96
136

score 1 · Answer 4 · answered Sep 05 '12 at 07:17

1

Try this code into your css:

.picacollinvitecoll img{
    margin-top:-3px;
    vertical-align:middle; 
    padding-top:2px;
}

answered Sep 05 '12 at 07:17

Alessandro Minoccheri

35,521
22
122
171

score -1 · Answer 5 · answered Sep 05 '12 at 07:18

-1

here is another way to do it. use align attribute of image, here is updated fiddle

http://jsfiddle.net/zcaT3/7/

answered Sep 05 '12 at 07:18

Jitender

7,593
30
104
210

1

The align property of `` is not only depreciated but actually obsolete in HTML5. – lpd Sep 05 '12 at 07:24

Vertically align text and image

5 Answers5