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

Discussion in 'Web Design and Development' started by thinkpatience, Oct 9, 2012.

  1. thinkpatience macrumors member

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

    ----- Subtitle Text -----​

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

    Why is this so difficult?
    Here's the HTML

         <a href="#">
         <img class="logo" src="#" alt="..."/></a>
     <div class="subtitle">
         <img src="#" width="60" height="1" alt="..."/>
         <h1>subtitle text</h1>
         <img src="#" width="60" height="1" alt="..."/>
    Any help would be greatly appreciated :D
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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,

    .subtitle h1 {
     display: inline;
    This might be enough depending on your existing CSS. The divs will need a text-align:center; on them.
  3. thinkpatience thread starter macrumors member

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

Share This Page