tags:

views:

16

answers:

1

Hi,

How can be image center horizontally inside smaller or bigger div, (image is variable and can be bigger then his div wrapper or smaller)?

Exist Javascript solution, but i looking for css solution.

The sample code that not working: (html should be not changed only css)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>my test</title>
    </head>
    <body>
        <div id="wrapper" style="width:300px;margin:0 auto;">
            <div id="image_content" style="margin:0 auto;">
                <img src="image_small_then_300_or_bigger.jpg" />
            </div>
        </div>
    </body>
</html>

Thanks

+1  A: 

You want to center align the image_content within the wrapper?

text-align

<div id="wrapper" style="width:300px;margin:0 auto;text-align:center;">

background-image

<div id="wrapper" style="width:300px;margin:0 auto;background:transparent url('image_small_then_300_or_bigger.jpg') 50% 50%;"> good call @gov

Brad
text-align:center; not working for firefox + chrome + opera
Yosef
if text-align:center doesn't work use margin left or padding left and make it in the center.
gov
otherwise you can make div as background image and give background position as center center
gov
1. Its not possible to solve with margin left without javascript 2. I dont want use background because the image will not exist for google
Yosef