|
| |
|
|
RickP
Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
 |
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
???
_____________________________
Regards, Rick
On-The-Web-Now!
|
|
|
|
caz
Posts: 3578
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: center aligning objects - not text? - 9/21/2005 9:41:22
Do you have a url for this page?
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
davidrandall
Posts: 82
Joined: 7/28/2005
Status: offline
|
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
< Message edited by davidrandall -- 9/21/2005 10:09:42 >
| |
|
|
|
coreybryant
Posts: 2479
Joined: 3/17/2002
From: Castle Rock CO USA
Status: offline
|
RE: center aligning objects - not text? - 9/21/2005 11:16:49
You can also try
<div style="margin:0 auto;width:770px">
_____________________________
Corey R. Bryant
Merchant Accounts | Toll Free Numbers | Expression Web Blog
| |
|
|
|
RickP
Posts: 693
Joined: 11/13/2004
From: Kent, U.K.
Status: offline
|
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
_____________________________
Regards, Rick
On-The-Web-Now!
| |
|
|
|
Tailslide
Posts: 6270
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6270
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 9/21/2005 17:45:13 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6270
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
