Vertical center - Font

Discussion in 'CSS' started by bluemanteam, Feb 2, 2008.

  1. #1
    Could someone advise what is the syntax to vertically center my text? I'd like to have the text centered both horizontally and vertically. I've tried a couple of different codes that I found on the net, but my text still stays at the top of the navigational bar.

    Below is my css code:

    Thank you

    #top {
    height: 44px;
    background: #ffffff;
    text-align: center;
    color: #000000;
    font: 10px Verdana;
    }
     
    bluemanteam, Feb 2, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    controlling via CSS? If it's a single line of text, set your line-height equal to your height... (as it is, I think your font declaration will be ignored in some browsers for being incomplete), if it's a fixed height, do the math and pad - if it's more than one line, dynamic height, and the container is not a TD or TH, you are pretty much SOoL. (**** out of luck)

    It's actually one of CSS's biggest weaknesses - when it comes to vertically aligning a dynamic height element WITH the outer container automatically growing - TOTAL /FAIL/ - It's one of the THREE cases where tables are VASTLY superior.

    Times to use a table for layout:

    1) When faux columns 'just won't cut it' or requires images that are too large.

    2) When it is in fact significantly LESS code and less REAL hacks than DIV's. (It DOES happen - BTW table for Layout is NOT a hack, **** the people that say otherwise as the arguements against hold water like a steel sieve)

    3) When vertical positioning other than 'top' is required on a dynamic height element.


    Since you declared a 44px height, I'm assuming it's only one line of text in a fixed height, not multiple lines. If so:

    #top {
      height:44px;
      text-align:center;
      font:normal 10px/44px verdana,sans-serif;
      color:#000;
      background:#FFF;
    }
    Code (markup):
    if it's more than one line of text - well, then you might have to rething your HTML - again, CSS without the HTML it's controlling AND the surrounding elements is pretty useless for evaluating problems/issues or answering even the simplest of questions.
     
    deathshadow, Feb 2, 2008 IP