Quote:
Originally Posted by sarettah
I am not a guru but
Code:
<style>
body {
text-align : center;
min-width : 500px;
padding: 0;
margin: 0;
}
DIV.main_page {
position:relative;
text-align: center;
left:0px;
width: 500px;
margin-left : auto;
margin-right : auto;
}
DIV.main_head{
text-align: center;
display: table-cell;
width:500px;
}
DIV.left_text{
display: table-cell;
text-align: left;
width:500px;
}
</style>
</head>
<body>
<br><br>
<div class="main_page">
<div class="main_head">
This text should be centered on the page<br>
</div>
<br>
<div class="left_text">
This text should be left aligned in center of page.<br>
</div>
</div>
</body>
</html>
example: http://www.bntnews.com/cssexample.htm
Hope that helps |
I understand that & question isn't about how to align the text.
I'm having issue with a conflict somewhere in either header.php or .css & whatever I try to center the 3 colums of blog end up centering the text as well even though the .css is coded for left text. I been going in circles with this for hours & for the life of me can't get all the files to co-operate.
I wish it was simple to code as in your example, but I'm referencing to a blog theme which is made of several different .php templates & somewhere there is a conflict.
anyway, here's the .css
Code:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #FF6600;
color: #003300;
}
h1, h2, h3, h4, h5, h6{
font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
font-size: 14px;
}
a{
text-decoration: underline;
color: #fff;
}
a:hover{
text-decoration: none;
}
a img, img{
border: 0;
}
abbr, acronym{ border: 0; }
address, dl, p{ padding: 15px 0 0; }
blockquote{
margin: 15px 0 0;
background: #FFCC00;
color: #fff;
}
blockquote p{ padding: 15px; }
blockquote blockquote{
margin: 15px;
background: #FFCC00;
color: #fff;
}
code{
background: #FFCC00;
}
dt{ font-weight: bold; }
dd{ padding: 0 0 0 15px; }
hr{
clear: both;
margin: 15px 15px 5px 15px;
border: 0;
height: 1px;
text-align: left;
background: #FFCC00;
color: #FFCC00;
}
/* Modified image styles of WordPress Default Theme, Kubrick */
.entry img{
border: 1px solid #FFCC00;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
margin: 5px 0 2px 7px;
padding: 4px;
display: inline;
}
img.alignleft {
margin: 5px 7px 2px 0;
padding: 4px;
display: inline;
}
img.wp-smiley{
border: 0;
margin: 0;
padding: 0;
background-color: transparent;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* end image styles */
small{
font-size: 11px;
}
pre{
width: 90%;
}
input, textarea{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
padding: 2px;
}
input#s, input#author, input#email, input#url, textarea#comment{
border: 1px solid #393939;
background-color: #FF6600;
padding: 3px;
color: #fff;
}
input#author, input#email, input#url{
margin: 0 5px 0 0;
}
#saranwrap{
margin: 0 auto;
width: 800px;
text-align: left;
vertical-align: top;
}
.airbubble{
padding: 5px;
background: #003300;
}
#header{
width: 800px;
height: 113px;
background: #000 ;
clear: both;
}
#header h1{
padding: 35px 0 0 20px;
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 36px;
color: #fff;
}
#top-menu{
padding: 11px 0 10px 0;
background: #FFCC00 ;
}
#top-menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#top-menu ul li{
display: inline;
padding: 0 10px;
font-family: Arial;
font-weight: bold;
text-transform: uppercase;
color: #FFCC00;
}
#top-menu a{
text-decoration: none;
}
#top-menu a:hover{
text-decoration: underline;
}
#banner{
float: left;
margin: 5px 0;
width: 760px;
height: 250px;
overflow: hidden;
background: #FFCC00;
}
#page{
clear: both;
float: left;
width: 760px;
background: #FFCC00;
color: #FF6600;
}
.pagecap{
padding: 19px 20px;
font-family: Arial;
font-size: 18px;
background: #FFCC00;
color: #fff;
}
#sidebar{
float: left;
width: 170px;
}
#sidebar ul{
margin: 5px 5px 0;
padding: 0;
list-style-type: none;
}
#sidebar ul li h2{
margin-bottom: 1px;
padding: 11px 10px 10px;
font-size: 12px;
font-weight: bold;
color: #FF6600;
background: #FFCC00;
}
#sidebar ul ul{
margin: 0;
padding: 0 0 20px;
background: #FFCC00;
}
#sidebar ul ul li{
padding: 6px 10px 0 10px;
font-size: 11px;
line-height: 18px;
}
#sidebar ul ul ul{
padding: 0;
background-color: transparent;
background-image: none;
}
.obar{
float: left;
width: 160px;
}
.obar ul{
margin: 97px 10px 0 0;
padding: 0;
list-style-type: none;
}
.obar ul li#search{
background-image: none;
padding-left: 0;
}
.obar ul li#search input{
margin: 0 0 5px;
}
.obar ul li h2{
padding-bottom: 10px;
border-bottom: 3px solid #FFFFFF;
font-size: 12px;
color: #000000;
}
.obar ul ul{
margin: 0;
padding: 0 0 20px;
}
.obar ul ul li{
padding: 6px 10px 0 15px;
font-size: 11px;
line-height: 18px;
background: url(images/bg-bullet.gif) 0px 13px no-repeat;
}
.obar ul ul ul{
padding: 0;
}
.obar ul ul ul li{
padding: 6px 10px 0 10px;
background-color: transparent;
background-image: none;
}
.narrowcolumn{
float: left;
margin-top: 5px;
width: 581px;
background: #FFCC00;
}
.narrowcolumn-footer{
clear: both;
width: 581px;
height: 18px;
background: #FFCC00;
}
.maincol{
float: left;
width: 421px;
}
.maincol-padding{
padding: 10px 10px 0;
}
.maincol .site-title{
padding: 10px 10px 8px;
border-bottom: 3px solid #006600;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #006600;
}
.subscribe{
margin: 0 0 1px;
padding: 6px 10px 7px;
border-bottom: 3px solid #fff;
font-size: 11px;
background: url(images/feed-icon.png) 10px 6px no-repeat;
}
.subscribe a{
padding-left: 22px;
color: #000000;
}
.post{
margin-bottom: 10px;
padding: 10px;
background: #FFCC00;
}
.post h2{
font-size: 12px;
font-weight: bold;
line-height: 18px;
}
.post h2 a{
color: #000000;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
border: 0;
padding: 15px 0 0;
background: none;
}
.entry h1{
font-size: 24px;
font-weight: normal;
line-height: 30px;
}
.entry h2{font-size: 14px;}
.entry h3{}
.entry h4{ font-size: 16px; }
.entry h5{ font-size: 14px; }
.entry h6{ font-size: 11px; font-weight: normal; }
.entry{
line-height: 24px;
color: #000000;
}
.postmetadata{
margin: 10px 0 0;
padding: 6px 10px;
font-size: 11px;
line-height: 18px;
background: #FFCC00;
color: #000;
}
.postmetadata a{
color: #FF6600;
}
.browse{
padding: 0 10px;
font-size: 11px;
line-height: 18px;
background: #FFCC00;
}
/* comments template */
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #fff;
}
.comments-template ol{
margin: 0;
padding: 0 0 20px;
list-style: none;
}
.comments-template ol li{
margin: 15px 0 0;
padding: 5px 0 15px;
line-height: 24px;
line-height: 24px;
border-bottom: 1px solid #fff;
}
.commentmetadata{
font-size: 12px;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
width: 90%;
}
/* end comments template */
#footer{
clear: both;
width: 760px;
padding: 5px 0;
background: #FFCC00;
}
#footer p{
margin: 0 5px;
padding: 20px 10px;
font-size: 11px;
line-height: 18px;
background: #FFCC00;
}
I've tried center tags, div, etc & all work but end up changing text with it at same time.. I'd like for the entire blog to be in center with the left align text, but am only able to get center/center or left/left but never center/left