vertical alignment

Discussion in 'HTML' started by Spartaco, Mar 20, 2007.

  1. Spartaco

    Spartaco Guest

    Hi, this is a big problem for me I can't solve it: I have a <div>, and I
    want the content of this div be vertically aligned in the middle by applying
    CSS styles to the div tag... I've tried the vertical-align but it does not
    work, the content is always at the top.

    Please help.

    Best regards
     
    Spartaco, Mar 20, 2007
    #1
    1. Advertising

  2. Spartaco

    Ben C Guest

    On 2007-03-20, Spartaco <> wrote:
    > Hi, this is a big problem for me I can't solve it: I have a <div>, and I
    > want the content of this div be vertically aligned in the middle by applying
    > CSS styles to the div tag... I've tried the vertical-align but it does not
    > work, the content is always at the top.


    vertical-align aligns the inline contents of the div with respect to the
    lines they're on, not with respect to the total height of the div.

    You could set line-height on the div to the div's own height, but if the
    lines break you will get an unwanted effect.

    Your best option may be to use a table cell instead of a div (or apply
    display: table-cell to the div). vertical-align on a table cell means
    what you expect.
     
    Ben C, Mar 20, 2007
    #2
    1. Advertising

  3. Spartaco

    mardi Guest

    On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:

    > Hi, this is a big problem for me I can't solve it: I have a <div>, and I
    > want the content of this div be vertically aligned in the middle by
    > applying CSS styles to the div tag... I've tried the vertical-align but
    > it does not work, the content is always at the top.
    >
    >

    Hi, I am but a humble student of the css-fu. I had the same issue arise in
    my studies and I did this:

    div.container { top: 0; left: 0; width: 100%; height: 100%; position:
    fixed; display: table }

    div.cell { display: table-cell; vertical-align: middle }

    then:

    <div class="container">
    <div class="cell">
    <p>My Content</p>
    </div></div>

    This works for vertical alignment in the latest versions of Firefox (I
    tried it in Linux and MS), Opera (Linux) and Konqueror (obvious :p) but it
    does not seem to work in IE 6 & 7.
     
    mardi, Mar 21, 2007
    #3
  4. mardi wrote:
    > On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
    >
    >> Hi, this is a big problem for me I can't solve it: I have a <div>, and I
    >> want the content of this div be vertically aligned in the middle by
    >> applying CSS styles to the div tag... I've tried the vertical-align but
    >> it does not work, the content is always at the top.
    >>
    >>

    > Hi, I am but a humble student of the css-fu. I had the same issue arise in
    > my studies and I did this:
    >
    > div.container { top: 0; left: 0; width: 100%; height: 100%; position:
    > fixed; display: table }
    >
    > div.cell { display: table-cell; vertical-align: middle }
    >
    > then:
    >
    ><div class="container">
    ><div class="cell">
    ><p>My Content</p>
    ></div></div>
    >
    > This works for vertical alignment in the latest versions of Firefox (I
    > tried it in Linux and MS), Opera (Linux) and Konqueror (obvious :p) but it
    > does not seem to work in IE 6 & 7.


    I don't know anything about this site, but your findings seem to agree
    with how it lists display:table:

    http://www.quirksmode.org/css/display.html


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Mar 21, 2007
    #4
  5. Spartaco

    mardi Guest

    On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
    > mardi wrote:
    >> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
    >>
    >>> Hi, this is a big problem for me I can't solve it: I have a <div>, and
    >>> I want the content of this div be vertically aligned in the middle by
    >>> applying CSS styles to the div tag... I've tried the vertical-align
    >>> but it does not work, the content is always at the top.
    >>>

    >> Hi, I am but a humble student of the css-fu. I had the same issue arise
    >> in my studies and I did this:
    >>
    >> div.container { top: 0; left: 0; width: 100%; height: 100%; position:
    >> fixed; display: table }
    >>
    >> div.cell { display: table-cell; vertical-align: middle }
    >>
    >> then:
    >>
    >><div class="container">
    >><div class="cell">
    >><p>My Content</p>
    >></div></div>
    >>
    >> This works for vertical alignment in the latest versions of Firefox (I
    >> tried it in Linux and MS), Opera (Linux) and Konqueror (obvious :p) but
    >> it does not seem to work in IE 6 & 7.

    >
    > I don't know anything about this site, but your findings seem to agree
    > with how it lists display:table:
    >
    > http://www.quirksmode.org/css/display.html


    Hi, thanks for the link, good info. I should have put in my original post
    that I found the code here:

    http://www.w3.org/Style/Examples/007/center.html
     
    mardi, Mar 21, 2007
    #5
  6. mardi wrote:
    > On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
    >> mardi wrote:
    >>> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
    >>>
    >>>> Hi, this is a big problem for me I can't solve it: I have a <div>, and
    >>>> I want the content of this div be vertically aligned in the middle by
    >>>> applying CSS styles to the div tag... I've tried the vertical-align
    >>>> but it does not work, the content is always at the top.
    >>>>
    >>> Hi, I am but a humble student of the css-fu. I had the same issue arise
    >>> in my studies and I did this:
    >>>
    >>> div.container { top: 0; left: 0; width: 100%; height: 100%; position:
    >>> fixed; display: table }
    >>>
    >>> div.cell { display: table-cell; vertical-align: middle }
    >>>
    >>> then:
    >>>
    >>><div class="container">
    >>><div class="cell">
    >>><p>My Content</p>
    >>></div></div>
    >>>
    >>> This works for vertical alignment in the latest versions of Firefox (I
    >>> tried it in Linux and MS), Opera (Linux) and Konqueror (obvious :p) but
    >>> it does not seem to work in IE 6 & 7.

    >>
    >> I don't know anything about this site, but your findings seem to agree
    >> with how it lists display:table:
    >>
    >> http://www.quirksmode.org/css/display.html

    >
    > Hi, thanks for the link, good info. I should have put in my original post


    I just found that site today, in fact, doing some homework on the
    display:table stlye. Looked like a good resource -- most of such sites
    I've seen haven't made it past IE4 or so. :)

    > that I found the code here:
    >
    > http://www.w3.org/Style/Examples/007/center.html



    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Mar 21, 2007
    #6
  7. Spartaco

    Neredbojias Guest

    On Wed, 21 Mar 2007 06:39:07 GMT mardi scribed:

    > On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
    >> mardi wrote:
    >>> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
    >>>
    >>>> Hi, this is a big problem for me I can't solve it: I have a <div>,
    >>>> and I want the content of this div be vertically aligned in the
    >>>> middle by applying CSS styles to the div tag... I've tried the
    >>>> vertical-align but it does not work, the content is always at the
    >>>> top.
    >>>>
    >>> Hi, I am but a humble student of the css-fu. I had the same issue
    >>> arise in my studies and I did this:
    >>>
    >>> div.container { top: 0; left: 0; width: 100%; height: 100%;
    >>> position: fixed; display: table }
    >>>
    >>> div.cell { display: table-cell; vertical-align: middle }
    >>>
    >>> then:
    >>>
    >>><div class="container">
    >>><div class="cell">
    >>><p>My Content</p>
    >>></div></div>
    >>>
    >>> This works for vertical alignment in the latest versions of Firefox
    >>> (I tried it in Linux and MS), Opera (Linux) and Konqueror (obvious
    >>> :p) but it does not seem to work in IE 6 & 7.

    >>
    >> I don't know anything about this site, but your findings seem to
    >> agree with how it lists display:table:
    >>
    >> http://www.quirksmode.org/css/display.html

    >
    > Hi, thanks for the link, good info. I should have put in my original
    > post that I found the code here:
    >
    > http://www.w3.org/Style/Examples/007/center.html


    Re. above link, neither one of the examples work in IE 6.

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, Mar 21, 2007
    #7
  8. Spartaco

    mardi Guest

    On Wed, 21 Mar 2007 05:26:36 -0500, Neredbojias wrote:

    > On Wed, 21 Mar 2007 06:39:07 GMT mardi scribed:
    >>
    >> http://www.w3.org/Style/Examples/007/center.html

    >
    > Re. above link, neither one of the examples work in IE 6.


    wow... really?
     
    mardi, Mar 22, 2007
    #8
    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. dba56
    Replies:
    0
    Views:
    848
    dba56
    Apr 14, 2005
  2. Luc
    Replies:
    2
    Views:
    434
    Sid Ismail
    Jan 19, 2004
  3. Nik Coughin

    Vertical alignment in a div

    Nik Coughin, Jan 21, 2004, in forum: HTML
    Replies:
    9
    Views:
    5,351
    Nik Coughin
    Jan 28, 2004
  4. Jim Heavey

    Vertical Alignment

    Jim Heavey, Mar 2, 2004, in forum: HTML
    Replies:
    10
    Views:
    781
  5. Arondelle
    Replies:
    12
    Views:
    781
    Spartanicus
    Jul 18, 2004
Loading...

Share This Page