Question

好的，我在<a>标记中有一个<h4>标记，因此<a>标记中显示的任何文字都会从h4中获取样式，并与其内联。

我的代码：

<h4>
    <a href=""><img src="http://i.imgur.com/hiXucbv.png"></a>
    hit
    <a href=""><img src="http://i.imgur.com/hiXucbv.png">user</a>
    and did something.
</h4>

现场演示：http://jsfiddle.net/3vyhb4fh/1/

我的问题是;如何让所有这些元素垂直对齐？目前，这些图像已经过时了，但改变行高仅会使页面上的格式变得混乱。

之前我没有真正以这种方式显示<a>标签，所以请告诉我这种方法是否不正确。

Answer 1

如果我已正确理解这一点，只需将其添加到您的css：

img {
    vertical-align: text-top;
}

Fiddle

Answer 2

听起来您想将vertical-align属性应用于图像。

<h4>
    <a href=""><img src="http://i.imgur.com/hiXucbv.png" style="vertical-align:middle"></a>
    hit
    <a href=""><img src="http://i.imgur.com/hiXucbv.png" style="vertical-align:middle">user</a>
    and did something.
</h4>

Here's the Fiddle

Answer 3

有多种方法可以做到这一点。表格或分区是两种方法。它需要更多的HTML代码。

如何在表格中垂直执行此操作是最快的。将每个项目放在一个单独的表格单元格中：

<table border=0 cellpadding=0 cellspacing=0>
  <tr>

      <td align=center valign=middle><img here></td>

      <td align=center valign=middle><h1><a href=''>Text Here</a></h1></td>

      <td align=center valign=middle><a href=''>Text Here</a></td>

      <td align=center valign=middle><a href=''><img here></a></td>

      <td align=center valign=middle><img here></td>

  </tr>
</table>

Answer 4

如果我理解您的要求，我认为您只想应用样式vertical-align: middle。

Demo

HTML：

<h4>
    <a href=""><img src="http://i.imgur.com/hiXucbv.png"></a>
    hit
    <a href=""><img src="http://i.imgur.com/hiXucbv.png">user</a>
    and did something.
</h4>

CSS：

h4 img {
    vertical-align: middle;
}

Answer 5

我不确定你的意思是完全符合标准。我的描述理解

但改变行高等事情似乎只会弄乱页面上的格式。

您希望图像垂直中间对齐，并且在第二个图像和“用户”之间需要一些空间。

我建议使用填充而不是使用填充，因为使用它不是一个好习惯。

a{ text-decoration: none; }
img{ vertical-align: middle; }
img.padded{ padding: 0px 5px 0px 0px; }

<h4>
    <a href=""><img src="http://i.imgur.com/hiXucbv.png"></a>hit
    <a href=""><img class="padded" src="http://i.imgur.com/hiXucbv.png">user</a>and did something.
</h4>

现场演示：http://jsfiddle.net/anujtyagi/9gL64Lt9/

希望这能回答你的问题。

如何将内联img href与文本标签对齐？

5 个答案: