CODEWITHSUNDEEP
htmlcsspositionalignmentcenter
Alex
Alex

Reputation: 105

How do I center <img /> <h1>...</h1> <img /> HTML + CSS?

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!

Upvotes: 0

Views: 954

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

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.

Upvotes: 1

nathan
nathan

Reputation: 5506

You can use display: inline and white-space: nowrap to accomplish this:

.subtitle {
    text-align: center;
    white-space: nowrap;
}
.subtitle h1 {
    display: inline;
}

Upvotes: 1

Related Questions