3 spans in href with vertical align to img

Question

I do have a div like this:

<div class="frontend-shop-cart-left">
   <a href="#">
      <img src="#" style=" display:inline; vertical-align: middle;height:60px; width:60px; " />
   </a>
   <a href="#">
      <span style="margin-left: 15px; font-size: 14px;" >1</span>
   </a>
</div>

The text ist vertical align to middle and it looks good. But if I am going to add two spans in the second href the rendering is bad.

It looks like this:

|-------|
| image | 1
|       |
|-------| 
 2 3

But I want this.

|-------|
| image | 1
|       | 2 3
|-------|

My html code is like this:

<div class="frontend-shop-cart-left">
   <a href="#">
      <img src="#" style=" display:inline; vertical-align: middle;height:60px; width:60px; " />
   </a>
   <a href="#">
      <span style="margin-left: 15px; font-size: 14px;" >1</span> <br/>
      <span style="margin-left: 15px; font-size: 14px;" >2</span>
      <span style="font-size: 14px;" >3</span>
   </a>
</div>

What is wrong with my CSS?

score 1 · Answer 1 · answered Aug 15 '14 at 12:15

1

Let the img element control the left flow using float: left

<img src="#" style="float: left; ....

DEMO

answered Aug 15 '14 at 12:15

Rahil Wazir

10,007
11
42
64

You shouldn't really float inline elements; – o--oOoOoO--o Aug 15 '14 at 12:21

score 1 · Answer 2 · edited May 23 '17 at 12:20

Display the anchors as inline-block elements and align them vertically by vertical-align: middle; as follows:

EXAMPLE HERE

a {
  display: inline-block;
  vertical-align: middle;
}

Also specifying vertical-align for the image removes the vertical gap under that (belonging to the inline elements which are positioned in their baseline), hence you could keep using it.

img {
  vertical-align: middle;
}

score 1 · Accepted Answer · answered Aug 15 '14 at 12:18

1

This is because the anchor tag is not a block element. You can either add display:inline-block to your anchor tags, or float the first or both anchor tags to the left.

Fiddle here: http://jsfiddle.net/qfx5xt0b/1/

answered Aug 15 '14 at 12:18

o--oOoOoO--o

770
4
7

score 1 · Answer 4 · answered Aug 15 '14 at 12:29

1

Simply put the two <a>s in separate <div>s and style these inner <div>s display: inline-block;

Alternatively, you could display: inline-block the two <a>s too.

Here's the Fiddle: http://jsfiddle.net/o8xnfujm/

answered Aug 15 '14 at 12:29

Karma

2,196
1
22
30

3 spans in href with vertical align to img

4 Answers4