Align center on float element

Hi guys,

I need help. Am trying to align everything on this page to the center:
http://www.incg.nl/blog/2008/hover-block-jquery/example/animate_hover.html

but having problems as it uses float.
you can find more info here: http://www.incg.nl/blog/2008/hover-block-jquery/

I tried putting them on a table and align to the center but doesn't look really good in some browsers.
any help? thanks

 

Welcome to DP forum.

1st, wrap the <ul> elements with a container div. 2nd. set the styles for the div (set a width ), 3rd. set the left and right margin to auto to the div

for example, note not tested but this should have stuffs in the center:


<div style="margin: 0 auto; width: 800px;">
<ul class="hover_block">
<li><a href="http://www.incg.nl/blog/2008/hover-block-jquery"><img style="top: 0px;" src="incg_hover.gif" alt="Timothy van Sas"> Hi there, i’m text. Kisses from Timothy van Sas. www.incg.nl</a></li>
<li><a href="http://www.incg.nl/blog/2008/hover-block-jquery"><img style="top: 0px;" src="incg_hover2.gif" alt="Timothy van Sas"> Hi there, i’m another text. Kisses from Timothy van Sas. www.incg.nl</a></li>
</ul>
<ul class="hover_block2">
<li><a href="http://www.incg.nl/blog/2008/hover-block-jquery"><img style="left: 0px;" src="incg_hover.gif" alt="Timothy van Sas"> Hi there, i’m text. Kisses from Timothy van Sas. www.incg.nl</a></li>
<li><a href="http://www.incg.nl/blog/2008/hover-block-jquery"><img style="left: 0px;" src="incg_hover2.gif" alt="Timothy van Sas"> Hi there, i’m another text. Kisses from Timothy van Sas. www.incg.nl</a></li>
</ul>
</div>

 

thank you so much for that. tested and it worked.

spend hours trying different method of div. thanks again.

 

Hi, i just notice something.
its still not exactly centered.

I use the html center tag on the text and I realized that the 2 box are not exactly centered.
please do look at this screen shot for what i am talking about



what could have gone wrong?

 

See here for solution.

cheers,

gary

 

Hope things are good now, gary's has a solution for you. I just had introduced a div as wrapper; however ul can be the wrapper.