Stylesheets - Centering a fixed with Div in the browser.

Author

Centering a fixed with Div in the browser.

CES

2005-11-11, 7:19 pm

All,

I'm sorry for the 2nd stupid question but... I'm trying to fix all of the issues I've had in the past. In the past I've resorted to using a table with the align attributed set to center as the container for the div that I want centered. As follows:

<table align="center">
<tr>
<td>
<div style="width:700px;background-color:Blue;">
TEXT Goes hear
</div>
</td>
</tr>
</table>

I've tried the following, with other variations, but while IE displays the div as I intended, Firefox does not center the div as intended it left aligns it.

<div style="text-align:center;">
<div style="width:700px;background-color:Blue;">
TEXT Goes hear
</div>
</div>

Any help on this would be greatly appreciated. Thanks in advance. - CES

Greg Heilers

2005-11-11, 10:21 pm

CES wrote:

> All,
>
> I'm sorry for the 2nd stupid question but... I'm trying to fix all of the
> issues I've had in the past. In the past I've resorted to using a table
> with the align attributed set to center as the container for the div that
> I want centered. As follows:
>
> <table align="center">
> <tr>
> <td>
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </td>
> </tr>
> </table>
>
> I've tried the following, with other variations, but while IE displays the
> div as I intended, Firefox does not center the div as intended it left
> aligns it.
>
> <div style="text-align:center;">
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </div>
>
> Any help on this would be greatly appreciated. Thanks in advance. - CES

This seems to work for me, though I will not vouch for the "political
correctness" of the method:

...............................

<div style="text-align:center;">
_____<div style="width:700px; background-color:blue;
margin-left:auto; margin-right:auto;">
_________TEXT_Goes_hear
_____</div>
</div>

--

Greg Heilers
Registered Linux user #328317 - SlackWare 10.1 (2.6.10)
.....

As far as anyone knows we're a nice, normal family.

-- Homer Simpson
There's No Disgrace Like Home

Gérard Talbot

2005-11-12, 3:21 am

CES a écrit :
> All,
>
> I'm sorry for the 2nd stupid question but... I'm trying to fix all of
> the issues I've had in the past. In the past I've resorted to using a
> table with the align attributed set to center as the container for the
> div that I want centered. As follows:
>
> <table align="center">
> <tr>
> <td>
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </td>
> </tr>
> </table>
>
> I've tried the following, with other variations, but while IE displays
> the div as I intended, Firefox does not center the div as intended it
> left aligns it.
>
> <div style="text-align:center;">
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </div>

As I understand what you are looking for (it's not clear), you want to
center the inline element, not center the block-level element within its
own container. I must say I'm not sure of what you want to center.

<div style="text-align:center; width:700px; background-color:
blue;">TEXT Goes hear</div>

Try this demo:

http://www.gtalbot.org/NvuSection/N...lAlignment.html

Gérard
--
remove blah to email me

Spartanicus

2005-11-12, 3:21 am

CES <none@none.com> wrote:

>I've tried the following, with other variations, but while IE displays the div as I intended, Firefox does not center the div as intended it left aligns it.

http://dorward.me.uk/www/centre/

--
Spartanicus

Tony

2005-11-13, 6:51 pm

"CES" <none@none.com> wrote in message
news:4%9df.5447$ek6.1085@news-wrt-01.rdc-nyc.rr.com...
> All,
>
> I'm sorry for the 2nd stupid question but... I'm trying to fix all of the
> issues I've had in the past. In the past I've resorted to using a table
> with the align attributed set to center as the container for the div that
> I want centered. As follows:
>
> <table align="center">
> <tr>
> <td>
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </td>
> </tr>
> </table>
>
> I've tried the following, with other variations, but while IE displays the
> div as I intended, Firefox does not center the div as intended it left
> aligns it.
>
> <div style="text-align:center;">
> <div style="width:700px;background-color:Blue;">
> TEXT Goes hear
> </div>
> </div>
>
> Any help on this would be greatly appreciated. Thanks in advance. - CES

Read up on CSS a bit more - the answer is actually rather easy to find:

IE renders incorrectly and centers the DIV. A DIV is a block-level element,
and should not be centered by use of "text-align". Rather, you center a DIV
by adjusting the margins. Try:

<div style="text-align:center;"> 
<div
style="width:700px;background-color:blue;margin-left:auto;margin-right:auto;">
Text goes here
</div>
</div>

Also, try a little more googling - and check out the CSS tutorial at
W3schools.com: http://www.w3schools.com/css/default.asp