Question

this is frustrating me… I’m trying to make something that looks like this:

   Logo

img|h1|img

The images that surround the subtitle are just horizontal lines to look like this

— Subtitle —

Here’s the HTML:

<div>
     <a href="#">
     <img class="logo" src="#" alt="..."/></a>
 </div>
 <div class="subtitle">
     <img class="1" src="#" width="60" height="1" alt="..."/>
     <h1>subtitle text</h1>
     <img class="2" src="#" width="60" height="1" alt="..."/>
 </div>

I’ve tried placing the elements within another div and defining a width: %; for that div with a margin:0 auto; but the problem with that is that if a user increases their text size within the browser the right image moves to the next line.

Any help would be great. thank you!

Answer 1

Try putting the inline img tags within the block h1 element then styling the H1 tag as follows:

CSS:

h1{
 width: 100px; /* whatever width you prefer*/
 text-align: center;
}

Html:

 <h1>
    <img class="1" src="#" width="60" height="1" alt="..."/>
    subtitle text
    <img class="2" src="#" width="60" height="1" alt="..."/>
 </h1>

Example: http://jsfiddle.net/sujvM/ Note*: For some reason you need to click the run button for images to load in jsfiddle.