CODEWITHSUNDEEP
css
Ben
Ben

Reputation: 25817

How can be located image in the middle of his div, if image is variable and can be bigger then his div wrapper or smaller?

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

Upvotes: 0

Views: 88

Answers (1)

Brad
Brad

Reputation: 15577

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

Upvotes: 1

Related Questions