0

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">
<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

Ben
  • 25,389
  • 34
  • 109
  • 165

1 Answers1

1

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
  • 15,361
  • 6
  • 36
  • 57
  • if text-align:center doesn't work use margin left or padding left and make it in the center. – kobe Oct 26 '10 at 15:11
  • 1
    otherwise you can make div as background image and give background position as center center – kobe Oct 26 '10 at 15:13
  • 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 – Ben Oct 29 '10 at 12:57