Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Vertical Centering Content within a Container???

    I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)

    I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.

    What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.

    What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.

    The actual thing I am working on is this:

    I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.

    Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?

    It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.

    Any help would be greatly appreciated Thanks in advance!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Link Module</title>
    <style type="text/css">
    <!--
    .wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
    .header { height: 47px; border-bottom: thin dotted #666; }
    .txt-style {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    color: #666666;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    display: block;
    }
    .cos-sl-txt-cntr-two {
    height: 150px;
    }
    .cos-sl-txt-cntr-two ul {
    height: 150px;
    margin-top: auto;
    margin-bottom: auto;
    }
    .cos-sl-txt-cntr-two li {
    margin-top: 50%;
    margin-bottom: auto;
    }
    cos-sl-img-two {
    width: 150px;
    height: 150px;
    background-color: #FF0033;
    }
    .learn-txt, .leader-txt {
    color: #FF6666;
    font-family: "Arial", Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0; 
    padding-top: 2px;
    padding-left: 10px;
    letter-spacing: .75px;
    }
    .leader-txt {
    color: #fff;
    font-size: 23px;
    font-weight: bold;
    padding-top: 0px;
    line-height: 24px; 
    letter-spacing: -0.25px; 
    }
    .img-ctnr, .img-ctnr-two {
    width: 150px;
    height: 150px;
    float: left;
    padding-left: 12px;
    }
    /* IMAGE LOCATION */
    .img-two {
    width: 150px;
    height: 150px; 
    display: block;
    background-color: #FF99CC;
    border: solid 3px #CCC; 
    }
    .txt-cntr, .txt-cntr-two {
    width: 406px;
    height: 126px;
    float: left;
    }
    .txt-cntr-two {
    width: 250px; 
    height: 150px;
    padding-left: 50px;
    background-color:#CC99CC; 
    }
    .txt-pos {
    float: left;
    width: 100px;
    height: 50px; 
    padding-left: 20px; 
    }
    /* NAME TEXT/TITLE TEXT */
    .name-txt, .info-txt, .name-txt-title, .info-txt-link {
    font-family: "Arial", Helvetica, sans-serif;
    font-size: 13px;
    color: #003466; 
    margin: 0;
    padding-top: 18px;
    padding-left: 13px;
    }
    .sl-name-txt-title {
    color: #666;
    font-size: 10px;
    font-weight: bold; 
    }
    /* INFO TEXT/TEXT LINK OVER-RIDE */
    .info-txt, .info-txt-link {
    	padding-top: 0;
    	color: #333;
    	font-size: 12px;
    	line-height: 1.1; 
    }
    .info-txt-link a {
    	color: #003466;
    	text-decoration: none; 
    }
    /* Hover State for the web links */
    .info-txt-link a:hover {
    	color: #ED1B24;
    	text-decoration: none; 
    }
    -->
    </style>
    </head>
    
    <body>
    	<div class="wrapper">
    		<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
    		<div class="header">
    			<p class="learn-txt">Title</p>
    			<p class="leader-txt">Subtitle</p>        
    		</div>
    		<div class="img-ctnr-two">
    			<div class="img-two">
    			</div>
    		</div>
    		<div class="txt-pos">
                <p class="name-txt-title">Canada</p>
                <p class="info-txt-link"><a href="#">www.mylinkhere.com</a></p>                 
            </div>
        </div>
    </body>
    </html>
    Last edited by Capone; 11-09-2010 at 04:43 PM. Reason: Adding CSS and HTML

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    What tag are you setting margin auto on?

    I might not be understanding you fully, but have you tried using padding: auto; on your links or <a> tag?

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    padding doesn't work because this container I am trying to create needs to have the link centered within the container. So if the user adds only 1 link then it will be centered inside the container, add 3 links than they will center automatically as well.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Then try putting your dynamic list inside a <ul></ul> tag and set the <ul> to:

    ul{ margin: auto;}

    have you got a link to your site?

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is that this script is going inside a CMS that is not built. I am trying to build a container that will be flexible depending on its content. I've tried posting this problem in many other forums and no one has been able to come up with a solution to it yet.

    The problem isn't centering 1 item inside the container. The problem is when other links are added. The new links will center below the first one. I'm feeling like that this cannot be done.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Capone View Post
    The problem is that this script is going inside a CMS that is not built. I am trying to build a container that will be flexible depending on its content. I've tried posting this problem in many other forums and no one has been able to come up with a solution to it yet.

    The problem isn't centering 1 item inside the container. The problem is when other links are added. The new links will center below the first one. I'm feeling like that this cannot be done.
    There's always a way...lol I'm just not smart enough to help.

    I cant see why you couldnt wrap the list in another div and set margins to auto on THAT div....no matter how many links or list items are dynamically inserted, it will always auto margin it in relation to the outer div. Just another thought.

  • #7
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Logically you would think it works... but it doesn't. Setting a width on a horizontal axis works when the margin left and right is set to auto, but on the vertical axis it doesn't. It appears that gravity is affecting the CSS lol!

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Capone View Post
    Logically you would think it works... but it doesn't. Setting a width on a horizontal axis works when the margin left and right is set to auto, but on the vertical axis it doesn't. It appears that gravity is affecting the CSS lol!
    hmm. well I have a multitude of dynamically created tables that are populated by an undetermined number of rows. However, everything is vertically and horizontally aligned regardless of the content.

    So in keeping with that logic, divs should and do work the same way! lol

    Again, I'm either just brain dead today, or I'm not smart enough to resolve this issue...lol Someone I know will soon enough.

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Both of these should work. Choose either one. Let me know if they don't. ^_^

    Code:
    <html>
    <head>
      <title>Universal vertical center with CSS</title>
      <style type="text/css">
        .greenBorder {border: 1px solid green;} /* just borders to see it */
      </style>
    </head>
    
    <body>
      <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
        <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
          <div class="greenBorder" style=" #position: relative; #top: -50%">
            any text<br>
            any height<br>
            any content, for example generated from DB<br>
            everything is vertically centered
          </div>
        </div>
      </div>
    </body>
    </html>
    Code:
    <head>
        <title>Vertical centering in valid CSS</title>
        
        <style type="text/css">
            #outer {height: 400px; overflow: hidden; position: relative;}
            #outer[id] {display: table; position: static;}
            
            #middle {position: absolute; top: 50%;} /* for explorer only*/
            #middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
            
            #inner {position: relative; top: -50%} /* for explorer only */
            /* optional: #inner[id] {position: static;} */
            
            /* just format */
            div.greenBorder {border: 1px solid green; background-color: ivory;}
        </style>
    </head>
    
    <body>
    <h1>Vertical Centering in valid CSS - Example</h1>
    <div id="outer" class="greenBorder">
        <div id="middle">
    
            <div id="inner" class="greenBorder">
                any text<br>
                <b>any height</b><br>
                any content, for example generated from DB<br>
                everything is vertically centered<br>
            </div>
        </div>
    
    </div>
    </body>
    </html>
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #10
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your efforts, but both of those solutions wont work. I tried them yesterday.

    The reasons they won't work is that they blow up and have a ton of browser errors (not browser friendly). Adding breaks to content is also not going to work as I need to have three unique containers to be aligned (not just three lines of text).

    Again thanks for your efforts, I appreciate the help.


  •  

    Tags for this Thread

    Posting Permissions

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