如何对齐img href与它所在的文本标签？

好吧，所以我在<h4>标记中有一个<a>标记，因此<a>标记中显示的任何文本都会从h4中挑选样式，并与其内嵌。如何对齐img href与它所在的文本标签？

我的代码：

<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>标签，所以请告诉我这种方法是否不正确。

来源

2014-08-29 user3420034

你是什么意思完全内联？你想让它们在左侧对齐的独立线上？或者你想让他们在同一条线上，但在线的中间对齐？ – 2014-08-29 00:54:10

我的意思是它的高度;所以图像的中心与文本的中心对齐。那么如何调整一个元素的高度而不影响h4文本。 – user3420034 2014-08-29 00:59:53

如果我理解这一点正确只是添加到您的CSS：

img { 
    vertical-align: text-top; 
}

Fiddle

来源

2014-08-29 01:10:28 cameronjonesweb

有多种方法可以做到这一点。表或Div是两种方法。它需要更多的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>

来源

2014-08-29 00:51:58

如果我理解你的要求，我觉得你只是想应用的样式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; 
}

来源

2014-08-29 01:06:36 acjay

这听起来像你想的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。

来源

2014-08-29 01:10:18

我不知道你的完美在线的意思。我的理解你的描述

但改变像行高的东西似乎只是弄乱了页面上的格式。

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

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

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/

希望这回答了你的问题。

来源

2014-08-29 01:29:12 Tyagi

如何对齐img href与它所在的文本标签？

回答

相关问题