CSS - Can't Get Text To Center Align In A Div

Hi folks, don't usually post in the CSS forum here, but in the php forum I have got great help so give it a go. Basically I need to know how to center two divs on a page which themselves have float:left attribute.

When I set text-align:center on the body a couple of other divs aligned perfectly so I did not have to worry about different res's. But I need these two divs (leftnav and content) next to each other and acheived this by setting the float:left attribute. The CSS code is below, I hope you can help, i have tried but these two divs in one outer div (without any float set) but didn't work.

Code:

body
{
	font-family: "Lucida Sans";
	font-size: 12px;
	margin: 0px 0px 10px;
	border-top: 0px none #000000;
	border-right: 0px none #000000;
	border-bottom: 5px none #000000;
	border-left: 0px none #000000;
	scrollbar-arrow-color: #D20000;
	scrollbar-3dlight-color: #4F4F82;
	scrollbar-darkshadow-color: #4F4F82;
	scrollbar-face-color: #f4f4f0;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #d0d0d0;
	scrollbar-track-color: #ffffff;
	text-align: center;
	display: block;
}


.leftnav {
	float: left;
	color: #000000;
	font-size: 12px;
	font-family: "Trebuchet MS";
	border-top: 1px solid #000000;
	border-right: 1px none #000000;
	border-bottom: 1px none #000000;
	border-left: 1px none #000000;
	padding: 0px;
	white-space: nowrap;
	width: 220px;
	margin: 10px 0px 0px 10px;
	clear: both;
	text-align: left;
}

.content {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	float: left;
	white-space: normal;
	margin-top: 10px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-family: "Trebuchet MS";
	font-size: 13px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 1000px;
	margin-right: 0%;
	list-style-type: none;
	text-align: left;

}

Thanks very much.

im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later...

anyhow, my question is quite simple... i think..

i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain.

anyhow, now for a snippit

Code:

   .advertboxtitle {
  margin:10px 0px 0px 110px;
  height:50px;
  border:1px dashed #900;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#CCFFFF;
  font-weight:bold;
  text-align:center;
  }
  	 .advertboxtitlevalign {
  	  vertical-align:middle;
  	  } 
  

Code:

  <div class="advertboxtitle">
 <span class="advertboxtitlevalign">From X-Box to Xbox</span>
 </div>
  

anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link..

http://defunctgames.com/helpfix/middle.htm

the text needs to be align verticaly in the dashed red box.

thanks

I'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work.

Code:

a.aMenuLinks:link
{
  color: #666666;  
  font-family: tahoma, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  text-indent: 15px;
  width: 100%;
  height: 25px;
  display: block;
}

Thanks...

Hi,

I'm using XHTML & CSS (strict dtd) and using one large table to format my pages.

Within the table I have different alignments and any other sort of thing that you would find in a table.

W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape??

Everything within the table is great, but the table itself is not centered.

I'm using CSS in the following manner to try to center it currently

Code:

<!-- All the doctype stuff and head tags go here...-->

<body style="text-align:center">

<!-- Rest of the document -->

It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape.

As you may know "<center>" is not defined in the XHTML strict dtd so that options out.


Thanks for any help or suggestions,

Kalan

My new site can be found at http://www.rockapedia.co.uk/index2.php

It works exactly how I want it in Firefox but IE doesn't appear to centre the whole page.

Can someone advise please.

Hi all,

I have a layout where I have a banner at the top and I want the column below it to align in the center of the page, like this ... How can I do this?

Also, can someone tell me how to make the top banner column fill the whole width of the page?

Thanks.

I've tried the usual trick of setting the width and margin-left and right to auto but it just doesnt work. If someone could please help with this, that would be great. This is all the code in my css file as of now, i'm using an img tag as my bacground incase people were wondering, so that it would resize to fit the window. the #content block is the one that i'm referring to.

css Code:
Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; text-align: center; margin-left: auto; margin-right: auto; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #content { width: 800px; height: 600px; top: 0px; left: 0px; position: absolute; z-index: 6000; border: 1px solid #FFFFFF; margin-left: auto; margin-right: auto; } .nav { background-image: url('images/blank.jpg'); background-repeat: no-repeat; } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }

  

 body {


     font-family: Verdana, Tahoma, Arial;


     color: #FFFFFF;


     text-align: center;


     margin-left: auto;


     margin-right: auto;


 }


 .bg {


     width: 100%;


     position: absolute;


     top: 0;


     left: 0;


     z-index: 5000;


 }


 #content {


     width: 800px;


     height: 600px;


     top: 0px;


     left: 0px;


     position: absolute;


     z-index: 6000;


     border: 1px solid #FFFFFF;


     margin-left: auto;


     margin-right: auto;


 }


 .nav {


     background-image: url('images/blank.jpg');


     background-repeat: no-repeat;


 }


 a:link {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 }


 a:hover {


     text-decoration: underline;


     color: #0066CC;


     font-size: 9px;


 }


 a:visited {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 }


 a:active {


     text-decoration: none;


     color: #0066CC;


     font-size: 9px;


 } 

How? I want to be able to do it from my stylesheet.

Thanks guys.

hello
i have this style in a css file....

.subheadinginvgreen {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #006666;
font-weight: bold;
sline-height: .2em;
align:center;
}

somehow when i apply it to a div tag, it does not center the text...e.g. <div class="">test text</div>

my entire page's body is contained in a div. the width of this thing doesnt change. i want to keep the page on the center of the browser widow.
i tried <div align=center>......

but this aligns the contents of the div and not the div itself.

please help

Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you.

<div style="width:800px">

<div style="width:730px;border:solid 1px red;float:left;">
LOTS OF CONTENT... MORE THAN 1 LINES
</div>

<div style="width:50px;float:right;border:solid 1px red;">
CLOSE LINK SHOULD BE HERE LATER
</div>

<div style="clear:both;"></div>

</div>

I am trying to get a row of mixed divs to align horizontally center on the page. I would also like to move the Google Checkout logo up a bit so it is vertically centered relative to the logos on that row. Can you help me do these things? TIA! I've tried doing a lot of things including profanity but no go. The screenshot below is how the page looks now with this css:
Code:

.row div { height:75px; float:left; } #AuthorizeNetSeal,#googleCheckoutLogo,#paypal { margin-top:25px; }

Code:

<div class="row">  <!-- (c) 2005, 2011. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="xxxxxxxx";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a> </div>  <img src="http://www.hotscripts.com/forums/images-manual/small_cc_icon_discover.gif" >  <div><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=xxxxxxxxxxx" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0"></A><!-- End Official PayPal Seal --></div>  <div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=xxxxxxxxxxxx&loc=en_US&f=png' ></script>  <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxx"></script></span>  <img src="http://www.hotscripts.com/forums/images-manual/100satisguar80x79.gif"> </div>

Here's what it looks like now:

I have used an image file "picture.PNG" like this :

<h1><img src="picture.PNG" /></h1>

then the css is

h1{
text-align: center;
margin: 20px;
padding: 10px;
height: 100px;
}

But it will not align the image in the center ?

Am i going about this the wrong way ? or is it just a syntax error ?

Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS?

Hi

when i use this in my css file

Code:

div.head {
 width: 100%;
 border: 1px dotted black;
 align: center;
}

and place an image within the div using head class. it doesn't put the image in the center of the div.

however if on the page i use

Code:

<div class=head align=center><img src='pic.gif'></div>

it does work.

can anybody guide me please why the align attribute doesn't take affect from css file?

thank you