...

View Full Version : Cannot find centering issue in this CSS..Help pls



nickmtchl
07-29-2012, 07:49 PM
The issue I am having is that everything is centered correctly except the #main_section area. Any help is appreciated.

Thans

[CODE]
*{
margin: 0px;
padding: 0px;
}

h1{
font: bold 20px tahoma;
}

h2{
font: bold 14px tahoma;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
body{
text-align: center;
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#top_strip{
background: black;
padding: 15px;
margin-bottom: 25px;
}
#big_wrapper{
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_nav{
margin-bottom: 50px;
}
#new_div{
margin-bottom: 50px;
text-align: center;
display:-webkit-box;
-webkit-box-orient: horizontal;
}
#main_section{
text-align: center;
}
#welcome{
width: 245px;
}


#bottom{
width: 100%;
-webkit-box-orient: horizontal;
padding: 20px;
background-image:url(footerbg.png);
}
[CODE]

stevenmw
07-29-2012, 09:28 PM
Can you post a link to your page?

DrDOS
07-29-2012, 09:48 PM
The usual way to center a div is margin: 0 auto;, you don't need to say px. That will center it in whatever container it's in. You may need to set widths to get everything just the way you want it.

stevenmw
07-29-2012, 09:53 PM
Are you trying to center a div or just text?I assumed you only wnated the text centered since the div code that you mentioned was just



#main_section{
text-align: center;
}



if you want to center the div itself the use



#main_section{
text-align: center;
margin: 0 auto;
}


or



#main_section{
text-align: center;
margin-left: auto;
margin-right: auto;
}


Whether it is just text you want centered or the div itself DrDOS is correct. The widths need to be adjusted in order for your center effect to show up.

Major Payne
07-30-2012, 03:33 PM
The usual way to center a div is margin: 0 auto;, you don't need to say px. That will center it in whatever container it's in. You may need to set widths to get everything just the way you want it."0" (zero) is dimensionless and does not require a unit.

Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:


body {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as a Class:


.selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:
<div class="selector_name">Content here</div>

Example as an ID:


#selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:
<div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum