Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Aug 2009
    Posts
    1
    Member #
    19703
    I'm looking for the most efficient way to vertically center two elements of unknown height within their container (also of unknown height).

    I've got a container holding some text and an image. The text is aligned to the left and the image to the right. Depending on which has the greater height, and is therefore determining the height of the container, I would like the other element to be centered vertically within the container.

    I found a fairly simple solution for Firefox and IE8 by using "display: table", "display: table-cell", and "vertical-align: middle", but this doesn't work in IE7. So in an IE7 style sheet I attempted to use this approach:


    Code:
    #container
    {
         position: relative;
         overflow: hidden;
    }
    
    #positionText
    {
          position: absolute;
          top: 50%;
          left: 0;
    }
    
    p
    {
          position: relative;
          top: -50%;
    }
    Code:
    <div id="container">
    <div id="positionText">
    <p>Text</p>
    </div>
    </div>
    The image was positioned similarly. This centers them relative to one another the way I would like, but since they're both positioned absolutely, they're removed from the flow of the page and their container collapses.

    Any help with this problem would be much appreciated. I would also be interested to hear better Firefox/IE8 solutions. I'm not, however, concerned with IE6 functionality.

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i cant believ this didnt get an answer. what happened to all the opinionated experts that made me not want to be here. if this still needs a reply let me know. i would be glad to help.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

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

Search tags for this page

csss vertical align elements in container

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com