SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center text in div

    OK, I looked around here and could not find what I thought would help.

    I need to center the text in each div. I have tried but no centering.

    Here is my template code:
    Code:
    <!DOCTYPE html>
    <html lang="en" >
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=9"/>	
    		<title>
    			New SACCC Home Page Design
    		</title>
    		<style type="text/css">
    		@charset "utf-8";
    		/* CSS Document */		
    		
    		#wrapper
    		{
    			width: 95%;
    			margin: 0 auto;
    			margin-top: 20px;
    			display: table;
    			border: 5px red solid; 
    		}
    		.heading
    		{
    			margin: 0 auto;
    			width: 100%;
    			height: 160px;
    		}
    		
    		#leftPic
    		{
    			clear: both;
    			float: left;
    			padding: 5px 10px;
    			width: 150px;
    			height: 150px;
    			overflow:hidden;			
    			border: 2px green dotted;
    		}
    		
    		#bodyLeftNav
    		{
    			clear: both;
    			float: left;
    			padding: 5px 10px;
    			width: 150px;			
    				overflow:hidden;
    			border: 2px olive solid;
    		}
    		
    		#midDescription
    		{
    			float: left;
    			height: 155px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 5px 10px;			
    		}
    		
    		#bodyCenter
    		{
    			float:left;
    			display: block;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 5px 10px;			
    			     text-align:center;
    			border: 2px yellow solid;
    		}
    		
    		#rightPic
    		{
    			float: right;		
    			width: 190px;
    			height: 150px;
    			padding: 5px 10px;			
    			border: 2px black solid;
    		}
    		
    		#rightPic p
    		{
    			padding: 0;
    			margin: 0;
    			margin-top: -5px;
    			font-size: 1.2em;
    			color: #FF4500;
    		}
    		
    		#bodyOptionalRightColumn
    		{
    			float: right;		
    			width: 155px;			
    			padding: 5px 10px;			
    		}
    		
    		.webBody
    		{
    			float: clear;
    			border: 2px solid orange;
    		}
    		
    		.pageFooter 
    		{
    		   position:absolute;
    		   bottom:0;
    		   width:95%;
    		   height:60px;   /* Height of the footer */
    		   background:#6cf;
    		}
    		</style>
    	</head>
    
    	<body>
    		<div id = "wrapper">
    			<div class="heading">
    				<div id = "leftPic">
    					This is the left picture area
    				</div>
    				
    				<div id = "midDescription">
    					<p style="text-align: center;" >this is the description area </p>
    				</div>
    				<div id = "rightPic">
    					Thi is the right picture area
    				</div>
    			</div>
    			<div class="webBody">
    				<div id="bodyLeftNav">
    					this is nav section
    				</div>
    				<div id="bodyCenter">
    				this is the web body				
    				</div>
    				<div id="bodyOptionalRightColumn">
    				this is the right section
    				</div>
    			</div>
    			
    			<div class = "pageFooter">
    				this is the footer
    			</div>
    		</div>
    		
    	</body>
    </html>
    Thanks
    E

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You haven't really said what you want to center, but if you mean the text in the middle, the problem arises with the container being floated, so that it shrink wraps the content. Perhaps describe how you want this layout to work, and a better option can be suggested.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,584
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <!DOCTYPE html>
    <html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <title>
            New SACCC Home Page Design
        </title>
        <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    
    #wrapper {
        width: 95%;
        margin: 0 auto;
        margin-top: 20px;
        display: table;
        border: 5px red solid;
    }
    .heading {
        margin: 0 auto;
        width: 100%;
        height: 160px;
        text-align:center;
    }
    
    #leftPic {
        clear: both;
        float: left;
        padding: 5px 10px;
        width: 150px;
        height: 150px;
        overflow:hidden;
        border: 2px green dotted;
        text-align:center;
    }
    
    #bodyLeftNav {
        clear: both;
        float: left;
        padding: 5px 10px;
        width: 150px;
        overflow:hidden;
        border: 2px olive solid;
        text-align:center;
    }
    
    #midDescription {
        display:inline-block;
        height: 155px;
        padding: 5px 10px;
    }
    
    #bodyCenter {
        display: inline-block;
        padding: 5px 10px;
        border: 2px yellow solid;
    }
    
    #rightPic {
        float: right;
        width: 190px;
        height: 150px;
        padding: 5px 10px;
        border: 2px black solid;
        text-align:center;
    }
    
    #rightPic p {
        padding: 0;
        margin: 0;
        margin-top: -5px;
        font-size: 1.2em;
        color: #FF4500;
    }
    
    #bodyOptionalRightColumn {
        float: right;
        width: 155px;
        padding: 5px 10px;
    }
    
    .webBody {
    /*  float: clear;   /* no such property */
        border: 2px solid orange;
        text-align:center;
    }
    
    .pageFooter  {
       position:absolute;
       bottom:0;
       width:95%;
       height:60px;   /* Height of the footer */
       background:#6cf;
       text-align:center;
    }
        </style>
    </head>
    <body>
    
    <div id = "wrapper">
        <div class="heading">
            <div id = "leftPic">
                This is the left picture area
            </div>
            <div id = "midDescription">
                <p>this is the description area </p>
            </div>
            <div id = "rightPic">
                Thi is the right picture area
            </div>
        </div>
        <div class="webBody">
            <div id="bodyLeftNav">
                this is nav section
            </div>
            <div id="bodyCenter">
                this is the web body
            </div>
            <div id="bodyOptionalRightColumn">
                this is the right section
            </div>
        </div>
        <div class = "pageFooter">
            this is the footer
        </div>
    </div>
    
    </body>
    </html>
    Your turn.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Code:
    		#wrapper
    		{
    			margin: 20px 2.5% 0 2.5%  ;
    			margin-top: 20px;
    			overflow:hidden;
    			border: 5px red solid; 
    		}
    		.heading { 
    			height: 160px;
    			padding: 0 214px 0  174px;
    			overflow: hidden;
    		}
    		
    		#leftPic
    		{
    			float: left;
    			padding: 5px 10px;
    			width: 150px;
    			height: 150px;
    			border: 2px green dotted;
    			margin-left:-174px
    		}
    		#rightPic
    		{
    			float: right;		
    			width: 190px;
    			height: 150px;
    			padding: 5px 10px;			
    			border: 2px black solid;
    			margin-right:-214px; 
    		}
    		#midDescription
    		{
    			float: left;
    			height: 155px;
    			width: 100%;
    		}
    		#midDescription p {padding: 5px 10px;}
    		#rightPic p
    		{
    			padding: 0;
    			margin: 0;
    			margin-top: -5px;
    			font-size: 1.2em;
    			color: #FF4500;
    		}
    		#bodyLeftNav
    		{
    			float: left;
    			padding: 5px 10px;
    			width: 150px;			
    			border: 2px olive solid;
    			margin-left: -174px
    		}
    		
    		
    		#bodyCenter
    		{
    			float:left;
    			padding: 5px 10px;			
    			border: 2px yellow solid;
    			width:100%;
    		}
    		
    		
    		#bodyOptionalRightColumn
    		{
    			float: right;		
    			width: 155px;			
    			padding: 5px 10px;
    			margin-right:-199px;
    			outline: 1px solid red			
    		}
    		
    		.webBody{ border: 2px solid orange; padding:0 199px 0 174px; outline: 1px solid red; overflow: hidden }
    		
    		.pageFooter 
    		{
    		   position:absolute;
    		   bottom:0;
    		   width:95%;
    		   height:60px;   /* Height of the footer */
    		   background:#6cf;
    		}
    		
    		div {text-align: center}
    Should do it w/o any modification to your html ( other than removing inline CSS , cuz it's evil).
    The problem stemmed from the fact that floats shrink-wrap. in other word your text WAS centered, but the container was the EXACT with of your text and floated left. thus you need to give your floated elements a set width.

  5. #5
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

    I now have a "working" template using both ronpat's and dresden_phoenix's codes. However, now I need to (1) have the left nav and right column made the "wrapper" start to grow height wise with the "longer" one doing the most "forcing" and (2) the footer to stay permanently on the bottom of the display.

    Here is my updated code:
    Code:
    <!DOCTYPE html>
    <html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <title>
            New SACCC Home Page Design
        </title>
        <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    
    #wrapper {
        width: 95%;
        margin: 0 auto;
        margin-top: 20px;
        border: 5px red solid;
    }
    .heading {
        margin: 0 auto;
        width: 100%;
        height: 160px;
        text-align:center;
    }
    
    #leftPic {
        clear: both;
        float: left;
        padding: 5px 10px;
        width: 150px;
        height: 150px;
        overflow:hidden;
        border: 2px green dotted;
        text-align:center;
    }
    
    #bodyLeftNav {
        clear: both;
        float: left;
        padding: 5px 10px;
        width: 150px;
    
        border: 2px olive solid;
        text-align:center;
    }
    
    #midDescription {
        display:inline-block;
        height: 155px;
        padding: 5px 10px;
    }
    
    #bodyCenter {
        display: inline-block;
        padding: 5px 10px;
        border: 2px yellow solid;
    }
    
    #rightPic {
        float: right;
        width: 190px;
        height: 150px;
        padding: 5px 10px;
        border: 2px black solid;
        text-align:center;
    }
    
    #rightPic p {
        padding: 0;
        margin: 0;
        margin-top: -5px;
        font-size: 1.2em;
        color: #FF4500;
    }
    
    #bodyOptionalRightColumn {
        float: right;
        width: 190px;
        padding: 5px 10px;
    	border: 2px black dashed;
    }
    
    .webBody {
        border: 2px solid orange;
        text-align:center;
    }
    
    .pageFooter  {
       position:absolute;
       bottom:0;
       width:95%;
       height:60px;   /* Height of the footer */
       background:#6cf;
       text-align:center;
    }
        </style>
    </head>
    <body>
    
    <div id = "wrapper">
        <div class="heading">
            <div id = "leftPic">
                This is the left picture area
            </div>
            <div id = "midDescription">
                <p>this is the description area </p>
            </div>
            <div id = "rightPic">
                Thi is the right picture area
            </div>
        </div>
        <div class="webBody">
            <div id="bodyLeftNav">
                this is nav section
    			<ul>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>	
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>
    				<li> 1 </li>				
            </div>
            <div id="bodyCenter">
                this is the web body with a variable width
    			<p>but somehow it might not work properly???</p>
            </div>
            <div id="bodyOptionalRightColumn">
                this is the right section
            </div>
        </div>
        <div class = "pageFooter">
            this is the footer
        </div>
    </div>
    
    </body>
    </html>
     
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fredep57 View Post
    Thanks guys.

    I now have a "working" template using both ronpat's and dresden_phoenix's codes. However, now I need to (1) have the left nav and right column made the "wrapper" start to grow height wise with the "longer" one doing the most "forcing"
    The red border on the wrapper doesn't grow with the floats because floated content is removed from the flow. You need to contain your child floats in order to make the parent encompass the children. This can be simply done by applying overflow:hidden and zoom:1.0 to #wrapper but assumes that you don't want visible overflow. If you do need visible overflow then use the clearfix technique to encompass the floats.



    and (2) the footer to stay permanently on the bottom of the display.
    This depends whether you want a fixed footer always at the bottom of the viewport or a sticky footer at the bottom of the viewport only when the document doesn't reach the viewport; at other times the footer is at the end of the document. The sticky footer technique is explained in detail in the CSS faq (see my sig) so I won't elaborate here but it does need to be done correctly and exactly as per the details shown.

    A fixed positioned footer uses position:fixed and you place the footer at bottom:0; and left:0 and right:0; (unless you want it centralised as in the demo I linked to). However as it is removed from the flow it needs to be a fixed height and thus you must ensure that you add padding bottom (equal to the height of the footer) to the last element above the footer so that it can scroll clear of the fixed footer. Fixed positioned footers are only suitable for small height footers preferably with a fixed width.

    I also note you are using inline-block for your middle column but this will only work as long as the content in that element does not reach the right column. If it stretches to the right column then something will break and the columns will drop. Usually in a three column layout with a flexible centre you would float the left and right columns first and then follow this with a static element that has left and right margins to clear the left and right floated columns above (similar to this basic example).

    Your original question was about centring some text so the methods offered for that example would not necessarily be the same if you were in fact creating a fluid layout. As I always say the answer to a questions is: "It depends on what comes next"


Bookmarks

Posting Permissions

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