Vertical Centering Content within a Container???

Capone · 11-09-2010, 03:46 PM

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>

teedoff · 11-09-2010, 04:43 PM

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?

Capone · 11-09-2010, 05:19 PM

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.

teedoff · 11-09-2010, 05:25 PM

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?

Capone · 11-09-2010, 05:33 PM

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.

teedoff · 11-09-2010, 05:40 PM

Quote:

Originally Posted by Capone

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.

Capone · 11-09-2010, 06:24 PM

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!

teedoff · 11-09-2010, 06:35 PM

Quote:

Originally Posted by Capone

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.

Chris Hick · 11-09-2010, 07:29 PM

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>

Capone · 11-09-2010, 08:33 PM

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.