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. macrumors member

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

    :apple:
    ----- 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

    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 :D
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. thread starter macrumors member

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

Share This Page