CSS text-align problem?

[duke]

I have several weather forecasts on my site and I had been centering them on the page like this:

<center>
<?php
include("widgets/accuwidget.php");
?>
</center>

This however fails CSS3 so I moved it to the CSS like this,
on the page:

<div id="accuwidget">
<?php
include("widgets/accuwidget.php");
?>
</div><!-- accuwidget -->

and on the CSS:

#accuwidget {text-align:center;}

However this seems to be a bit hit and miss. It centers the forecast widget on this page but not on this page. They both centered before using <center></center>.

The CSS is the same for both except the div name:
#accuwidget {text-align:center;}
#metwidget {text-align:center;}

Any ideas why one behaves and one does not?

[tobyspond]

Try this is your css:

{
display: block;
margin-left: auto;
margin-right: auto }

Kerry

[duke]

Thanks Kerry for your suggestion but that did not work either.

After banging my head for most of this evening , I've simply gone with this:

#accuwidget {text-align:center; padding-left:87px}

Anything wrong with that?

[tobyspond]

Duke,

Another approach is to use positioning; e.g.,

{
position: absolute;
top: 2%;
left: 0.5%;
}

set the top and left percent to the value that gives you the position you want.

In the accuweather widget you specify a height and width in a div style - maybe that is causing the placement difficulty.

Kerry

[duke]

In the accuweather widget you specify a height and width in a div style - maybe that is causing the placement difficulty.

Would it be better written as:

.style {text-align:center;}

[tobyspond]

You can try that.

I tested the widget out on a page and was able to position it using

position: absolute;
top: 50%;
left: 10%;

in the css for the div id accuwidget

you may need to adjust the percentages.

Kerry

[duke]

Thanks for your efforts Kerry, but when I try that in the CSS the page background shrinks to about 100px height under the Accuweather widget. I'll just stick with the padding-left:87px; and not lose any sleep over it. It must be something with the widget why it will not obey text-align:center;.

Thanks for your help.

[beteljuice]

Code: Select all

#accuwidget {width:630px; margin-left:auto; margin-right:auto;}

[duke]

Code: Select all

#accuwidget {width:630px; margin-left:auto; margin-right:auto;}

Thank you