Clever Geek Handbook

How to align inline img href with text tag?

So, I have a tag <a>

inside a tag <h4>

, so any text displayed in the tag <a>

picks the style from h4 and is inline with it.

My code:

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

Live demo: http://jsfiddle.net/3vyhb4fh/1/

My question is, how can I get all of these elements to be vertically aligned? Currently images are going away, but changing things like line height seems to mess up the formatting on the page.

I haven't shown tags <a>

this way before , so please tell me if this approach is wrong.

+3


source to share


5 answers


If I got it right, just add this to your css:

img {
    vertical-align: text-top;
}


Fiddle

+4


source


It looks like you want to apply the vertical-align property to 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 a Fiddle .

+3


source


There are several ways to do this. Tables or separators are two methods. This requires a little more html code.

How to vertically do it in a table is the fastest. Place each item in its own 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>
+2


source


If I understand what you are 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;
}
+2


source


I'm not sure what you mean by strict control. What I understood from your description

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

you want the images to be vertically centered and require some space between the second image and the "user".

I would suggest using padding instead of using it as it is not recommended 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.

+2


source






More articles:


All Articles