Vertical alingment of image and text in a link

HTML & CSS
1

Hi this is another issue I am having difficulty with;

How do I align (I want to center horizontally) the image and the text on a link.

<li><a href=“XYZ”><img src=“XYZ” alt=“XYZ”<h1>XYZ</h1></a></li> so that the title “h1” appears vertically centered with the image.
Now the h1 is appearing bellow the imagge no matter what I try.

2

Hi xhtmlcoder, thx for the info:

Sorry it’s the first time I mess around with web design (or any other programing) so I certainly doing lots of basic mistakes.

Actually I am doing a navigation menu, with 2 columns and 3 links per column.

Each link has an image (linking to page) and an h1 text (also linking to page).

When I see the links, I have the image on top and the h1 text under, what I want is to have the image on the left of the text, and the h1 text at the right of the photo and centered vertically. (not at the bottom of the image).

Thx again for your help.

<ul>

<li>
<a href=“to page A”><img src=“pictureA.jpg” alt=“A”<h1>title pageA</h1></a>
</li>

<li>
<a href=“to page B”><img src=“pictureB.jpg” alt=“B”<h1>title pageB</h1></a>
</li>

<li>
<a href=“to pageC”><img src=“pictureC.jpg” alt=“C”<h1>title pageC</h1></a>
</li>

<li>
<a href=“to pageD”><img src=“pictureD.jpg” alt=“D”<h1>title pageD</h1></a>
</li>

<li>
<a href=“to pageE”><img src=“pictureE.jpg” alt=“E”<h1>title pageE</h1></a>
</li>

<li>
<a href=“to pageF”><img src=“pictureF.jpg” alt=“F”<h1>title pageF</h1></a>
</li>

</ul>

3

Hi,

You should do it like this although I would actually lose the heading element as this is not a heading really (and it certainly isn’t an h1 as there should only be one H1 per page).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
img,a img{border:none}
.test{
    margin:0;
    padding:0;
    list-style:none;
}
.test li{margin:0 0 10px}
.test h3{
    margin:0;
    display:inline;
}
.test h3 a{
    display:block;
    text-decoration:none;
}
.test h3 span{
    text-decoration:underline;
    margin:0 0 0 10px;
    vertical-align:middle;
    color:#000;    
}
.test h3 img{
    display:inline;
    vertical-align:middle;    
}

</style>
</head>
<body>
<ul class="test">
    <li>
    <h3><a href="#a"><img src="pictureA.jpg" alt="a" /> <span>Title A</span></a></h3>
    </li>
    <li>
        <h3><a href="#b"><img src="pictureB.jpg" alt="b" /> <span>Title B</span></a></h3>
    </li>
    <li>
        <h3><a href="#c"><img src="pictureC.jpg" alt="c" /> <span>Title C</span></a></h3>
    </li>
    <li>
        <h3><a href="#d"><img src="pictureD.jpg" alt="d" /> <span>Title D</span></a></h3>
    </li>
    <li>
        <h3><a href="#e"><img src="pictureE.jpg" alt="e" /> <span>Title E</span></a></h3>
    </li>
    <li>
        <h3><a href="#f"><img src="pictureF.jpg" alt="f" /> <span>Title F</span></a></h3>
    </li>
</ul>
</body>
</html>
4

I am trying this but i have also face this problem. I cant suggest any thing for this just waiting for best reply.

5

Thx for the info.

Will revise and see if it works.

Cheers

6

The code sample you gave is complete gibberish I am afraid to say… You have block level elements within inline elements and malformed syntax. I assume you were trying to write the following:

    <ul>
      <li>
        <h1>
          XYZ<a href="XYZ"><img src="XYZ" alt="XYZ"></a>
        </h1>
      </li>
    </ul>

Although I am not sure why you wanted it within a list and are you sure you didn’t want the h1 text within a hyperlink?

You might have to rephrase the question because in one instance you are saying vertical and the other horizontal. Unless you mean you want a horizontally centred H1 with a image directly centred below it.