如何對齊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與它所在的文本標籤？

回答

相關問題