vertically align link next to image with CSS

Question

EDIT:
Yes, this is a duplicate, my mistake (I am new to CSS). But can anybody explain the rationale behind aligning the image, as opposed to the link / text? Is there some larger concept at work here that would help me understand the concepts of CSS better and avoid problems like this in the future?

Original (Duplicate) Part:
I have a scenario where I want to have a link next to an image on my page, and the link should be aligned so that it is vertically centered with the image. Of course I don't know the exact height of the image, so this should be done dynamically.

Given this chunk of HTML, how would I achieve such a thing with CSS?

<div class="myDiv">
    <img src="myImage"/>
    <a href="#">My Link!</a>
</div>

I have a fiddle at this location, and you will note that I have placed some size information in the image class. This is just to simulate an image of unknown size, so please consider the question without it.

@MarcB Thanks, I'm new to CSS so I thought there was a difference. Good to see that the community is living up to its reputation. — A.R., Nov 26 '13 at 17:48
css doesn't really know about images. they're just blocks to display on screen. text block, image block... blocks blocks blocks. — Marc B, Nov 26 '13 at 17:49
Would you like me to give you a long, drawn out explanation, or just point you to the specs that explain how vertical-align works? — j08691, Nov 26 '13 at 18:10
I would like the CSS community to turn off the attitude when I ask a question. I'm trying to learn, geez. — A.R., Nov 26 '13 at 18:13
No I'm serious. I wasn't trying to be snarky. It's a boring explanation that's not much fun to read or write. I just wanted to know if you wanted me to spell it out for you in an answer or just point you to the relevant tech docs. — j08691, Nov 26 '13 at 18:15

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

4.8. Vertical alignment: the 'vertical-align' shorthand baseline alignment property

Applies to: inline-level and 'table-cell' elements

This property affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

While the elements a and img are both inline by default, the property vertical-align:middle should be used on the img element instead.

jsFiddle example

.myDiv img {
    vertical-align: middle;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 26 '13 at 17:45

Josh Crozier

233,099
56
391
304

Of course, because aligning the image is what I wanted to do. OK, so it works, but why is it like this? – A.R. Nov 26 '13 at 17:47
@A.R. I added some specs. – Josh Crozier Nov 26 '13 at 18:07

score 0 · Answer 2 · answered Nov 26 '13 at 17:45

0

try this:

.myDiv img{
vertical-align:middle;
}

DEMO

answered Nov 26 '13 at 17:45

Mohsen Safari

6,669
5
42
58

score 0 · Answer 3 · answered Nov 26 '13 at 17:45

0

Add vertical-align:middle; to the image instead of link.

Updated fiddle here.

answered Nov 26 '13 at 17:45

codingrose

15,563
11
39
58

score 0 · Answer 4 · answered Nov 26 '13 at 17:46

0

just use vertical-align: middle;

.myDiv img {
    vertical-align: middle;
}

answered Nov 26 '13 at 17:46

Vinay Pratap Singh Bhadauria

9,829
3
28
49

vertically align link next to image with CSS

4 Answers4