Center Dynamic Content Vertically and Horizontally?

[briansul]

First post on the forum, I've read the guidelines but please let me know if this post is inappropriate for any reason.

I would like to center dynamic html content within a larger container div, but I would like it to be centered both horizontally and vertically within its container.

<style>
#container {width:960px; background-color:#fcfcfc;}
#container div {
background-color:#ffffff;
color:blue;
display:inline-block;
text-align:center;
}
</style>

<div id="container">
<div class="panel">
<h1>Panel 1</h1><br/><p>Panel 1 Content</p>
</div>
<div class="panel">
<h1>Panel 2</h1><br/><p>Panel 2 Content</p>
</div>
<div class="panel">
<h1>Panel 3</h1><br/><p>Panel 3 Content</p>
</div>
</div>

Assuming that those 3 panels were generated dynamically (and would likely differ in their height & width), how is it possible to automatically have them align to the horizontal and vertical center of the container div, while remaining equidistant (from each other and the edges of the container). Note that the container div's width is the only concrete size attribute (960px).

Ideally the container div's height would adjust to the size of the largest panel, and any amount of panels could be generated that would still be centered in the container and be equidistant.

For this particular scenario, let's not worry about what would happen if say 20 panels were generated (that would get messy).

I have tried many methods found through google searches, including
1) margin:0 auto; for the panel divs.

2) position:relative; left:50%; for the container and position:relative; right:-50%; for the panel divs.

3) <div align="center">Content</div> for the panel divs.

None of these have centered the inner divs both vertically and horizontally, and don't conform to dynamically generated content.

[LearningCoder]

Never done it but seen lots of people asking. Keep seeing this url as a guide:http://www.wpdfd.com/editorial/thebox/deadcentre4.html

I bookmarked it for a time when I will be attempting something like this, so I will be testing the code at some point.

Someone will be able to give you a more direct explanation, but this could be useful.

Hope it helps you.

Regards,

LC.

[briansul]

Thanks for that Learning, that's an interesting approach. It seems to borrow the idea of left:50% for the container and right:-50% for the content div, with some important differences. I'll start playing around with this, but I still wonder how this can be accomplished when you aren't necessarily sure how much content will populate the container

EDIT > This worked perfectly for a single div, but it will take some more code to allow multiple divs to spread equally along the horizontal plane created by the "horizon" div (as in the example you gave).
Also, for my purposes I want the dynamic panel content to appear in a div that is near the bottom of the page, which I was able to do for a single div, but it required changing the "horizon" div's position to :relative rather than :absolute (this achieved the effect of placing the horizon div in the vertical center of its own container rather than the vertical center of the entire page). Unfortunately, it did not function as responsive css (when resizing the window, it did not adjust. I believe this is because its position is relative to its container rather than absolute in the browser window)

Any idea how I could get 3 panel divs to follow this method of centering, while appearing as an inline-block? (right now the 3 panel divs just stack on one another so I can only see the last one rendered by the browser)

[LearningCoder]

Whatever the width is of each div is, set the next div's 'left' attribute to that many pixels.

for example you have your container div:

<div id="container">
	<div id="col1"></div>
	<div id="col2"></div>
	<div id="col3"></div>
</div>

Then you style it like so:

#container 
{
	width: 600px;
	border: 1px solid black;
	position: relative;
	top: 50px;
	left: 200px;
}
						
#col1 
{
	position: absolute;
	width: 200px;
	background: red;
	height: 400px;
}
	  
#col2 
{
	position: absolute;
	left: 200px;
	width: 200px;
	background: green;
	height: 400px;
}
	  
#col3 
{
	position: absolute;
	left: 400px;
	width: 200px;
	background: blue;
	height: 400px;
}

Please note, I have used position: relative here on the main container, because I haven't yet looked at the example of dead center, just change that to absolute though to implement it into what you initially wanted.

Kind regards,

LC.

[briansul]

Wonderful, this works for what I need at the moment, which is a preset number of panels within a container. Looks just like I envisioned, so I appreciate your help in getting me to this point!

Now I would like to figure out how to generate html dynamically (using php) that will conform to this design regardless of the number of panels and regardless of their differing sizes (based on the content which they contain), but that's a topic for another section.

If you or others reading this have any preliminary ideas you'd like to throw around, please do. But I will be signing off for the night, likely.

[LearningCoder]

To be honest, if your intention is to have 3 columns within a div, id use a floating technique to do it and avoid having to use absolute positioning. Depends what you want to do and/or the requirements.

In relation to dynamically generating html using php, not a clue . PHP is still very much a gray area for me.

Regards,

LC.

[felgall]

If something needs to be absolutely centered then the easiest way to do it with two divs with the outer using display:table and the inner using display:table-cell - you can then apply text-align:center and valign:center to the content

IE7 doesn't support that approach but then hardly anyone uses that browser any more.

[LearningCoder]

That's very interesting to know. I've never seen that technique in action before.

Might give that a test.

Regards,

LC.

[briansul]

Just following up, and I have another related issue I'm hoping can be resolved.

The method described initially in this thread (positioning the child div with position:absolute; and top:50%; within its parent) is working very well for me. I have been able to center full divs both vertically and horizontally within their parent elements using this method. However, I have run into an issue with aligning the text for <a> elements within their parent container.

Here's the pertinent code for this issue:

      <div id="content-nav-container">
          <div id="content-nav-center">
            <a href="#"><div id="personal-statement" class="tab-container">PERSONAL<br />STATEMENT</div></a>
            <a href="#"><div id="proficiencies" class="tab-container">PROFICIENCIES</div></a>
            <a href="#"><div id="experience" class="tab-container">EXPERIENCE</div></a>
            <a href="#"><div id="education" class="tab-container">EDUCATION</div></a>
          </div><!--content-nav-center-->
      </div><!--content-nav-container-->

Please note the reason the <a> tags are wrapped around the innermost <div> tags is to achieve the effect of the entire div appearing as a clickable link, rather than just the text of the <a> element.

Here's the pertinent css:

#content-nav-container {
	width:100%;
	height:60px;
	background-color:transparent;
	text-align:center;
	margin-top:30px;
}

#content-nav-center {
	position:relative;
	top:50%;
	width:100%;
	overflow:visible;
}

#content-nav-center div.tab-container {
	position:absolute;
	top:-30px;
	display: inline-block;
	padding:0;
	height: 60px;
	width: 200px;
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.4em;
	color:#87beea;
}

#content-nav-center div:hover {
	background-color:#FCFCFC;
	color:#FF1135;
}

content-nav-center div a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.4em;
	text-decoration:none;
}

content-nav-center div a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.4em;
	text-decoration:none;
}

#personal-statement {
	margin-left:-430px;
}

#proficiencies {
	margin-left:-210px;
}

#experience {
	margin-left:10px;
}

#education {
	margin-left:230px;
}

The issue I'm having is getting just the text for the <a> elements to center vertically within their associated <div>s. The problem gets a bit more complicated because the first link has two lines of text (separated by the <br /> tag) while the other 3 links have only one line of text.

I've really exhausted my ideas for how to do this and searching for a solution has not gotten me anywhere so far. Any suggestions? It's important that the size of the "div links" do not change in size as a result of centering the text.

[auslin]

Getting link text (1 line only) to be centred vertically can be done by setting the link's line-height equal to the link's height. This requires (for a row of links) that the link's display is set to inline-block, so the link can then use the assigned height.

The complication is the 2-line link. But that could be handled manually by setting a class to any 2-line links, and using that to override the line-height to be half the link's height. This centres the 2 lines, by spreading them evenly over the full link height. That may or may not be what you want. Anyway, below is a quick example of this line-height method.
It uses the more traditional way of grouping nav links, using UL-LI elements, rather than DIVs.

(If instead you wanted to centre any multi-line content closer together in the middle of its link, the display:table-cell method suggested by felgall would do that.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
ul      { width: 36em; 
          margin: 0 auto;
          font: 1.4em Arial, Helvetica, sans-serif;
          list-style: none; }
li      { display: inline; }
a       { display: inline-block;
          float: left;        		
          width: 8.5em; 
          height: 4em;           
          line-height: 4em; 		/* for 1 line content */
          text-align:center;
          background-color:#FFFFFF; 
          color:#87BEEA;
          text-decoration:none; 
     	  border: 1px solid blue; }
a.br    { line-height: 2em; } 	        /* for 2 line content */
a:hover { background-color:#FCFCFC; 
          color:#FF1135; }
</style>
</head>
<body>
  <ul>
    <li><a href="#" class="br">PERSONAL<br>STATEMENT</a></li>
    <li><a href="#">PROFICIENCIES</a></li>
    <li><a href="#">EXPERIENCE</a></li>
    <li><a href="#">EDUCATION</a></li>
  </ul>
</body>
</html>

[briansul]

Thank you auslin for that suggestion. It works well as a stop-gap solution to centering the link text within their respective divs. However, as you mentioned, centering the 2-line link "closer together" is desired, as otherwise it looks quite unfinished.

Unfortunately, I have not been able to get felgall's suggested method of using table alignment to properly affect my code. I can get it to work with simple tables in other examples, but I have a lot of trouble applying it to my existing work. For now I will simply use the line-height method with a special class for the 2-line link. I may ultimately decide to change the wording of that link to make it one line for convenience.

Not to ask you to do my work for me, but I have tried several times to get the table alignment method to apply to my code but I have not gotten any success. If you are able to make it work so that the 2-line link appears closer together, I would really appreciate it I'm not sure if the trouble I'm having is coming from improperly placing the valign style, or if it's coming from improperly placing the display:table(-cell) styles. Just can't seem to get it right.

EDIT >> As a solution (albeit a messy one) I simply wrapped the two lines of text in a div of its own, and gave that div the attribute height:55px; padding-top:5px;. This achieved the effect of centering the two lines without separating them as they would when using the line-height:30px; method (noting that the height of the .tab-container divs was universally 60px)

[auslin]

It just needs a few re-adjustments to make the 'CSS tables' method work. The example below uses a div wrapper for the links, as that seems to be what you are using, rather than the UL-LI-LINK hierarchy. The final appearance is the same as for the previous example, except that the 2-line link text is centred closer together.

Note that I included a Conditional Comment style sheet for IE6-7. Although IE6-7 useage is falling to low levels, they will ignore display:table & display:table-cell, which will break the menu's appearance in those browsers unless the links are floated for them. The rest of the IE6-7 fix just uses the previously mentioned line-height method as a vertical centering patch, if desired (if not desired, the .br class stuff is not needed at all). There are ways of getting perfect vertical centering in IE6-7 without applying any quantified styles, but probably too much trouble here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#nav    { width: 36em;
          margin: 0 auto;
	  font: 1.4em Arial, Helvetica, sans-serif;
	  text-align: center;
	  display: table; }
#nav a  { width: 8.5em;
	  height: 4em;
	  display: table-cell;
	  vertical-align: middle;
	  background-color: #FFFFFF;
	  color:#87BEEA;
	  text-decoration: none;
	  border: 1px solid blue; }
#nav a:hover { 
          background-color: #FCFCFC;
          color:#FF1135; }
</style>
<!--[if lt IE 8]>
<style type="text/css">
#nav a { float: left; /* float prevents breaking in IE6-7 */
         line-height: 4em; }
a.br   { line-height: 2em; }
</style>
<![endif]-->
</head>
<body>
<div id="nav">
  <a href="#" class="br">PERSONAL<br>STATEMENT</a>
  <a href="#">PROFICIENCIES</a>
  <a href="#">EXPERIENCE</a>
  <a href="#">EDUCATION</a>
</div>
</body>
</html>