This is frustrating me... How do I Center text between two images?

thinkpatience · Oct 9, 2012

Hi all, this is frustrating me... so essentially I have a website that looks like this:

----- Subtitle Text -----

"

" is my logo
"-----" Are the two images (which are lines).
Subtitle text is obviously text.

Why is this so difficult?
Here's the HTML

Code:

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

Any help would be greatly appreciated

angelwatt · Oct 9, 2012

The h1 tag is a block element so it's going to add a newline before and after itself, which causes it to not be inline with the surrounding images.

You didn't supply any CSS you're trying. For the h1 you can do,

Code:

.subtitle h1 {
 display: inline;
}

This might be enough depending on your existing CSS. The divs will need a text-align:center; on them.

thinkpatience · Oct 9, 2012

Ahh, I forgot h1 was a block element, duh ::facepalm:: I'll give it a shot and update, thanks!

Search

Search

This is frustrating me... How do I Center text between two images?

thinkpatience

macrumors member

angelwatt

Moderator emeritus

thinkpatience

macrumors member

Our Staff