SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    urgh, vertical align

    Yeah, I know that there must be alot of topics about this already.

    I did search for some time, but did not find other working solution, but the use of an table.

    I want to vertically align login text/form inside 150x150px div. The amount of text may vary and it usually has more lines than one.

    Okay, here are the solution proposals I've found so far:

    1. make the inner div containing the text top:50% and then margin-top:-(half of its height)px
    This will not work because I do not know the height, and I'd surely hate to use js for a simple job like this.

    2. make the outer div line height to 150px and then use vertical align in the inner one.
    This did not work because the text has more than one line, in my tryouts the second line of text warped quite a bit.

    3. Use one cell table to do it.
    Yeah, sure, did'nt we just want to get rid of tables in layouts?

    sample:
    Code:
     
    <style>
    #outer {
    border:1px solid red;
    width:150px;
    height:150px;
    }
    #inner {
    border:1px solid red;
    }
    </style>
    Both of these should be made vertically aligned at the same time.
    <div id="outer">
    <div id="inner">
    text and form elements that use unknown space
    </div>
    </div>
    <br>
    <div id="outer">
    <div id="inner">
    another text in there
    </div>
    </div>
    No javascript or tables please. I'd prefer it working in all browsers (atleast in ie 5.5+, ne, opera)
    Can this be done?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I don't think you understand the meaning of vertical-align as it is used outside of table cells. Basically, it's the vertical alignment of letters within one line of text. It only works on inline elements and table cells. Is there any reason your <div> needs to be 150px tall? Couldn't you just provide equal padding-top and padding-bottom to the <div> and let it work itself out? It will still give the appearance of middle vertical alignment that way.

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just said vertical-alignment as a term because it describes what I want to do.

    Also, yes it does matter. Outside the 150*150 px div is an background image that's designed for this area. The outcome looks bad if it is not centered properly.
    (Imagine a big letter O around the text I want to be centered. The ring ( or letter O ) is a part of the background graphics.)

    I understand that the web has limitations, but as css positioning is supposed to be used instead of tables and this is a trivial problem in tables, I was wondering why css does not do this?

    If only css would support things like this:
    margin-top:height/2;
    (And I do not want to hardcode that height, nor use javascript)

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this then:
    Code:
    <style> 
    .outer { 
    border:1px solid red; 
    width:150px; 
    height:150px; 
    position: relative;
    } 
    .inner { 
    border:1px solid red; 
    position: absolute;
    top: 50%;
    height: 50px;
    margin-top: -25px;
    } 
    </style> 
    Both of these should be made vertically aligned at the same time. 
    <div class="outer"> 
    <div class="inner"> text and form elements that use unknown space 
    </div> 
    </div> 
    <br> 
    <div class="outer"> 
    <div class="inner"> 
    another text in there 
    </div> 
    </div>
    I also redid your ids. Since they appear more than once in the same page, they should be classes.

  5. #5
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the effort, but the lower of those texts is not in center. I know the div it is in is centered, but the div will be invisible, so I want to align the inside content to vertical center regardless how much there is this content.

    You can test this yourself by adding 3 rows of text inside that inner div, centering it. And then changing that 3 rows of text to one word without touching the css/html bit. I did not manage to do this without tables.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Arkkimaagi
    You can test this yourself by adding 3 rows of text inside that inner div, centering it. And then changing that 3 rows of text to one word without touching the css/html bit. I did not manage to do this without tables.
    And you really won't be able to. There's nothing set up in CSS (at least, in any versions of CSS that the major browsers support) for vertical alignment of anything other than table cells or inline items.

  7. #7
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so I must use tables. That sucks. Thanks for your help thou.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •