CODEWITHSUNDEEP
htmlcssimageinline
user3420034
user3420034

Reputation:

How to align inline img href with text tag it's in?

I have an <a> tag inside a <h4> tag, so any text displayed in the <a> tag has the style from the h4 and is inline with it.

How can I vertically align all of these elements? I haven't really displayed <a> tags in this way before.

Upvotes: 3

Views: 10316

Answers (5)

Tyagi
Tyagi

Reputation: 37

I am not sure what you mean by perfectly in-line. What I understood by your description

but changing things like line-height only seems to mess up the formatting on the page.

you want the images to be middle aligned vertically and need some space between second image and "user".

I would suggest using padding instead of using   as it is not a good practice to use it. 

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>

Live Demo: http://jsfiddle.net/anujtyagi/9gL64Lt9/

Hope this answers your question.

Upvotes: 2

cameronjonesweb
cameronjonesweb

Reputation: 2526

If I've understood this properly just add this to your css:

img {
    vertical-align: text-top;
}

Fiddle

Upvotes: 3

Woodrow Barlow
Woodrow Barlow

Reputation: 9117

It sounds like you want to apply the vertical-align property to the images.

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

Upvotes: 3

Jeff Clayton
Jeff Clayton

Reputation: 7301

There are more than one way to do this. Tables or Divs are two methods. It requires a bit more html code.

How to vertically do this in a table is the fastest. Place each item in a separate table cell:

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

Upvotes: 2

acjay
acjay

Reputation: 36671

If I understand what you're asking, I think you just want to apply the style 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;
}

Upvotes: 2

Related Questions