Sandaysoft

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?

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

Try this is your css:

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

Kerry

_________________
http://www.tobyspondweather.com
twitter: @tobyspond

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?

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

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

_________________
http://www.tobyspondweather.com
twitter: @tobyspond

Would it be better written as:

.style {text-align:center;}

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

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

_________________
http://www.tobyspondweather.com
twitter: @tobyspond

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.

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

_________________

......................Imagine, what you will KNOW tomorrow !

Thank you

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

beteljuice, thank you for the suggested code - it seems this is mostly recommended CSS3 property as a (direct) replacement for the now deprecated 'align="center"' HTML attribute.

The only observation - if the code (CSS attributes) is used with a <div> tag, one must remember that, by default, the width of a <div> tag is 100%, thus a width value might be needed (as you have included into the code segment).