center aligning objects

center aligning objects - not text? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

RickP -> center aligning objects - not text? (9/21/2005 9:28:56)
How does one CENTER align an object - not text - with css? The only centering format in CSS I can find is {text-align: center:} What if I want to center align a table but I don't want everything in it centered? <div align="center"> before the table works but it doesn't validate under the strict doc type ???

caz -> RE: center aligning objects - not text? (9/21/2005 9:41:22)
Do you have a url for this page?

davidrandall -> RE: center aligning objects - not text? (9/21/2005 9:59:44)
in your CSS: table { width: 80%; margin: auto; } (edit) Hit submit too quickly! quote: <div align="center"> before the table works but it doesn't validate under the strict doc type The "align" element is deprecated. That means that it is outdated and there is a better way to achieve the same effect (by using CSS) Hope that helps Dave

coreybryant -> RE: center aligning objects - not text? (9/21/2005 11:16:49)
You can also try <div style="margin:0 auto;width:770px">

RickP -> RE: center aligning objects - not text? (9/21/2005 14:00:12)

Thanks All,

The {margin: auto;} seems to have done the trick (with or without the added "0") in the 4 browser tests I've made. Er... can someone explain why "auto" center aligns things? Or does it always?

I'm still having a problem trying to center a CSS horizontal nav bar though. Any further help here appreciated. Here's the code thus far:

#navcontainer
{ margin-top: 2px; padding: 0 0 0 0px; }

#navcontainer UL
{ list-style: none; margin: 0; padding: 0; border: none; }

#navcontainer LI
{ display: block; margin: 1px; padding: 0; float: left; width: 186px; text-align: center; }

#navcontainer A
{ color: #111111; display: block; width: auto; text-decoration: none; background: #75A3D1; font-size:10px; font-weight: bold;
margin: 0; border-left: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE; border-right: 1px solid #777777;
border-bottom: 2px solid #777777; padding-left:1; padding-right:1; padding-top:4; padding-bottom:4; }

#navcontainer li A:hover, #navcontainer li A:active
{ background: #88AA33; }

#navcontainer li a:link.active, #navcontainer li a:visited.active
{ position: relative; z-index: 102; background: #BBBBBB; font-weight: bold; }

#homepage #nav-homepage, #ironmongery #nav-ironmongery, #signs #nav-signs, #contact #nav-contact
{ background: #88AA33; }

And the HTML:

<div id="navcontainer">
<ul id="navlist">
	<li><a href="../../" title="zzz">Temple Graphics - Home</a></li>
	<li><a href="../../" title="zzz">Architectural Ironmongery</a></li>
	<li><a href="../../" title="zzz">Bespoke Signage</a></li>
	<li><a href="../../" title="zzz">Messages & Enquiries</a></li>
</ul>

</div>

Thanks for any offers

Tailslide -> RE: center aligning objects - not text? (9/21/2005 14:50:20)
Auto with regards to margins will mean that the browser will automatically put the margins at the same distance on each side - i.e. centering the <div> or whatever. margin: 0 auto; will put the item at 0px from the top of the page and equidistance from each side. Your list won't centre because you've floated it left. Do away with the display:block and float:left on the LI and do display:inline instead. Then you can do text-align:center (for IE) and margin: 2px auto; (for everything else) in your #navcontainer

RickP -> RE: center aligning objects - not text? (9/21/2005 15:38:52)
Thanks for the 'auto' lesson Tailside[;)] The horizontal nav still won't work with what you suggest - if I remove the float:left (in spite of using display:inline) it just reverts to a vertical list! [:@]

Tailslide -> RE: center aligning objects - not text? (9/21/2005 17:28:46)
OK - I played with it a bit and got this:Test Page Edit: played with it again slightly to do away with a left/right padding thing that was putting it all slighly off-centre.

RickP -> RE: center aligning objects - not text? (9/21/2005 17:53:59)
Thanks Tailside - that's very kind of you [:)] It looks good - so far... with my last effort I'd somehow managed to upset FF and Netscape, which decided they would throw everything after my nav bar outside of the main page layout!!?!! Is there any special reason for the height? Is it necessary to include height? #container {width:760px; margin:0 auto; height: 200px;} Obviously, once in context this pushes everything down the page but I will try to work from your version now - mine was getting just a little bit messy [8\|] Big thanks for your time [;)] PS - thought I'd look up your profile seeing that you've been so helpful. Ah, now your the one who keeps going on about doc types eh! Well, seeing I now owe you something I will add two doc types to my next webpage - just for you [:D]

Tailslide -> RE: center aligning objects - not text? (9/22/2005 2:32:31)
No there's no reason for the 200px - just left that in as it was from something else - sorry to confuse!

Page: [1]

0.0625