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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Center Dynamic Content Vertically and Horizontally?

    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.

    Code:
    <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.
    Last edited by briansul; 12-01-2012 at 12:41 AM. Reason: tried fixing the small CODE window, to no avail

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)
    Last edited by briansul; 12-01-2012 at 01:37 AM.

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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:

    Code:
    <div id="container">
    	<div id="col1"></div>
    	<div id="col2"></div>
    	<div id="col3"></div>
    </div>
    Then you style it like so:
    Code:
    #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.

  • Users who have thanked LearningCoder for this post:

    briansul (12-01-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    That's very interesting to know. I've never seen that technique in action before.

    Might give that a test.

    Regards,

    LC.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:
    Code:
          <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:
    Code:
    #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.

  • #10
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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.)

    Code:
    <!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>

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)
    Last edited by briansul; 12-05-2012 at 06:46 PM. Reason: update on a working solution

  • #12
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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.

    Code:
    <!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>


  •  

    Posting Permissions

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