| Author |
 Topic  |
|
|
bjlt
Senior Member
1144 Posts |
 Posted - 30 October 2003 : 02:01:51
|
How to center a div easily?
what's the style used for <div> that is the equivelant of align="center" in the exapmle below?
<div style="width:500;border:1px solid #B6B6B6;">
<table align="center" width="80%" border="2">
<tr>
<td>placed in the horizontal center of the parent holder</td>
</tr>
</table>
</div>
the width and position of the parent holder is not fixed.
Thanks in advance. |
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 30 October 2003 : 03:42:05
|
| I'd have to try this, but I believe you'll have to put a <div> around the current <div> and set it to text-align: center; using the style attribute and then set the text-align back to left for the <div> that you already have. |
 |
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 30 October 2003 : 06:14:07
|
You don't need to set the align back. Just setting it specifically for your div will work just fine. Was the example you posted just for fun, or are you planning on doing it like this, which is overkill? You could get the same results with either:
<div style="width:500;border:1px solid #B6B6B6;text-align: center;">
placed in the horizontal center of the parent holder
</div>
or just use:
<table align="center" width="400px" border="2">
<tr style="text-align:center">
<td>placed in the horizontal center of the parent holder</td>
</tr>
</table>
Personally, I prefer the first method, but I'm getting into css-based design more and more everyday. Plus it's more standards-compliant but will still degrade very nicely to the non-standard browsers. |
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
cripto9t
Average Member
USA
881 Posts |
Posted - 30 October 2003 : 07:01:44
|
This might help, Internet Explorer needs the parent division because it doesn't support "auto". "Text-align:center;" doesn't work for Netscape 6,7 and some other css2 compliant browsers.
<html>
<head>
<style type = "text/css">
#main {width:100%; text-align:center;} /* Need this division and text-align:center for I.E. */
#center {width:500px; border:1px solid #b6b6b6; margin-left:auto; margin-right:auto;} /* margin-left:auto; margin-right:auto; for css2 browsers */
</style>
</head>
<body>
<div id="main">
<div id="center">
<table align="center" width="80%" border="2px solid black;">
<tr>
<td align="center">placed in the horizontal center of the parent holder</td>
</tr>
</table>
</div>
</div>
</body>
</html> |
_-/Cripto9t\-_ |
|
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 30 October 2003 : 07:36:46
|
quote:
Originally posted by cripto9t
"Text-align:center;" doesn't work for Netscape 6,7 and some other css2 compliant browsers.
You're kidding, right? text-align is depricated in CSS2, making it necessary to code around that too if you want to make a fully CSS-complient site that works in all browsers?
I'll stick with tables thank you very much. At least that works everywhere. |
|
|
|
cripto9t
Average Member
USA
881 Posts |
Posted - 30 October 2003 : 09:31:45
|
Yea, you have to hack around to center in all browsers. The way I understand it, W3c designates "text-align" for inline elements only, which NS gets right, while IE uses it for block level and inline elements
This works for NS7
<table style="margin-left:auto; margin-right:auto; text-align:center;" width="80%" border="2">
<tr>
<td>placed in the horizontal center of the parent holder</td>
</tr>
</table>
This works for IE6
<div style="text-align:center">
<table style=" text-align:center;" width="80%" border="2">
<tr>
<td>placed in the horizontal center of the parent holder</td>
</tr>
</table>
</div>
This works for Both
<div style="text-align:center">
<table style="margin-left:auto; margin-right:auto; text-align:center;" width="80%" border="2">
<tr>
<td>placed in the horizontal center of the parent holder</td>
</tr>
</table>
</div>
Heres one of the better links I've found that shows a few methods and gives the reasons why. It explains alot better than I can.
http://allmyfaqs.com/cgi-bin/wiki.pl?Center_with_CSS |
_-/Cripto9t\-_ |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 30 October 2003 : 10:31:38
|
quote:
Yea, you have to hack around to center in all browsers.
huh?
text-align works just fine for divs and other block elements. And according to the w3c specs, I don't see anything about it being deprecated in CSS3.
In fact, I'm using text-align exclusively and haven't had a problem with NS6 or 7, Mozilla or Opera.
this code just worked for me in IE6, Mozilla and Opera:
<table style="text-align: center;" "width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>This is some sample text center aligned</td>
</tr>
</table>
|
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
bjlt
Senior Member
1144 Posts |
Posted - 30 October 2003 : 12:43:07
|
It's not for fun. I wanted to align a block at horizontal center of its parent holder, and the only method I know is using table align=center. I tried to align a div but couldn't make it.
modified.
The reason I didn't set the text-align of the parent holder is that I wanted to creat a templet which obtains align from a parameter.
e.g.
Sub something(align)
codes to output html
End Sub
I used to use table and tried to use div instead, and couldn't find a way to align the current div center like align=center of the table. so I came here to ask.
Table is ok, I just feel that div uses less html codes.
|
Edited by - bjlt on 30 October 2003 13:00:35 |
|
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 30 October 2003 : 15:08:27
|
using <div> tags will indeed cut down on the file sizes and should increase loading speeds though nowadays I don't think it'll make much of a difference unless you'd otherwise use lots of nested tables. Honestly, I believe that the crap you have to deal with when you don't use tables doesn't come near to weighing up to the advantages of not using tables.
In the topic I started about a table-less design I found a way to get the page to look almost the same using <div> tags and CSS as when I used less CSS and tables. Unfortunately, when I tested the table-less page in Netscape 7 and Opera 7 I saw that the page didn't work nearly the way it did in IE so it would require an entire rewrite to make it work. |
|
|
|
cripto9t
Average Member
USA
881 Posts |
Posted - 30 October 2003 : 15:47:35
|
quote:
Originally posted by davemaxwell
In fact, I'm using text-align exclusively and haven't had a problem with NS6 or 7, Mozilla or Opera.
this code just worked for me in IE6, Mozilla and Opera:
<table style="text-align: center;" "width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>This is some sample text center aligned</td>
</tr>
</table>
I thought bjlt wanted to center the div. and the text.
In NS7 your code centers the text not the table.
Try this with NS7 (I'm pretty sure NS6 will show the same). The table will be aligned to the left and the text will be centered
<table style="text-align: center;" "width="50%" border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>This is some sample text center aligned</td>
</tr>
</table>
As you stated above "<table align="center">" will center the table in most browsers.
|
_-/Cripto9t\-_ |
|
|
|
Dave.
Senior Member
USA
1037 Posts |
Posted - 30 October 2003 : 15:53:34
|
I know I'm naive (sp?), but it really seems something should be done to further standardize web-browsers. This really is insane, a page looks great in one browser and looks completely different in another browser!
I guess because nobody controls Internet/browser standards, it's almost impossible to set any real "Standards".
*Sigh* |
|
|
|
Rasco
Advanced Member
Germany
3192 Posts |
Posted - 30 October 2003 : 16:06:49
|
quote:
Originally posted by Dave.
I know I'm naive (sp?), but it really seems something should be done to further standardize web-browsers. This really is insane, a page looks great in one browser and looks completely different in another browser!
I guess because nobody controls Internet/browser standards, it's almost impossible to set any real "Standards".
*Sigh*
I thought, that`s the task of the W3C. But how would you get the browser producer to go after the W3C? Much has been done so long (thinking of the NS/IE browser war) but there is still a long way to go.
And btw. some guys are still using Linx  |
German Snitz Forum
|
|
|
|
bjlt
Senior Member
1144 Posts |
Posted - 31 October 2003 : 09:13:00
|
Thanks a lot.
I was looking for something like align=center/left/right that works the same for other elements, especially a div. text-align affects the content inside but not the element itself, while float only has left/right/none attribute but not center. If I set align=center in a div, it works in IE if no other position styles are set, I haven't tested in other browsers.
It seems there's no simple attributes like align= that works for a div?
|
|
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 31 October 2003 : 09:39:45
|
| Opera and Mozilla are as close to W3C standards as you can get a browser right now. But W3C thinks up the standards that everyone should stick to, they don't control what gets used nor how things are implemented and/or shown. Microsoft has always had a mind of its own, as everyone knows... If Opera wasn't so bulky, and if it was free (without the annoying banners), it'd be the only browser I'd be willing to use instead of IE. The other "alternatives" just don't cut it IMO. |
|
|
| |
Topic |
|
Topic Locked
