CSS Vertically Align Text

Discussion in 'HTML' started by Trevor, Apr 28, 2006.

  1. Trevor

    Trevor Guest

    Note the following html code:

    <div id="linkbar">
    <p>
    links
    </p>
    </div>

    Now take a look at this CSS:

    #linkbar {
    height: 30px;
    text-align: center;
    }

    #linkbar p {
    vertical-align: middle;
    }

    Why isn't the text in the div aligned vertically? What's the best way
    to do what I want?

    Thank you,
    Trevor
    Trevor, Apr 28, 2006
    #1
    1. Advertising

  2. On Fri, 28 Apr 2006 23:58:56 +0200, Trevor <> wrote:

    > Note the following html code:
    >
    > <div id="linkbar">
    > <p>
    > links
    > </p>
    > </div>
    >
    > Now take a look at this CSS:
    >
    > #linkbar {
    > height: 30px;
    > text-align: center;
    > }
    >
    > #linkbar p {
    > vertical-align: middle;
    > }
    >
    > Why isn't the text in the div aligned vertically?


    Vertical align is a property that works with table cells only.


    > What's the best way
    > to do what I want?


    Add display:table-cell; to the selector #linkbar p


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 28, 2006
    #2
    1. Advertising

  3. Trevor

    Neredbojias Guest

    To further the education of mankind, "Trevor" <>
    vouchsafed:

    > Note the following html code:
    >
    > <div id="linkbar">
    > <p>
    > links
    > </p>
    > </div>
    >
    > Now take a look at this CSS:
    >
    > #linkbar {
    > height: 30px;
    > text-align: center;
    > }
    >
    > #linkbar p {
    > vertical-align: middle;
    > }
    >
    > Why isn't the text in the div aligned vertically? What's the best way
    > to do what I want?


    Add this line to #linkbar p {

    line-height: 30px;


    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Apr 28, 2006
    #3
  4. Trevor

    Trevor Guest

    Awesome, thanks.
    Trevor, Apr 29, 2006
    #4
  5. Trevor

    Toby Inkster Guest

    Barbara de Zoete wrote:

    > Vertical align is a property that works with table cells only.


    vertical-align also applies to images. (And other replaced content??)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./embrace/out_of_nothing/06_keeping.ogg
    Toby Inkster, Apr 29, 2006
    #5
  6. Barbara de Zoete, Apr 29, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. homer

    div Wont Vertically Align

    homer, Jan 26, 2005, in forum: HTML
    Replies:
    6
    Views:
    4,635
    homer
    Jan 28, 2005
  2. Guybrush Threepwood
    Replies:
    1
    Views:
    468
    Mitja Trampus
    Dec 14, 2005
  3. Replies:
    1
    Views:
    490
  4. Julia B
    Replies:
    5
    Views:
    679
    Julia B
    Jan 30, 2008
  5. albert kao
    Replies:
    6
    Views:
    1,353
    Knute Johnson
    Apr 26, 2011
Loading...

Share This Page