html - 3个href中的跨度，与img垂直对齐

我确实有这样的div：

<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>

文字ist垂直对齐中间，看起来不错。但是，如果我要在第二个href中添加两个范围，则呈现效果不好。

看起来像这样：

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

但是我想要这个。

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

我的html代码是这样的：

<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>

我的CSS有什么问题？

最佳答案

这是因为锚标记不是块元素。您可以将display:inline-block添加到锚标记中，也可以将第一个或两个锚标记浮动到左侧。

在这里提琴：http://jsfiddle.net/qfx5xt0b/1/

关于html - 3个href中的跨度，与img垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25326164/