Question

I have got this css:

   <style type="text/css">

    #heading{
        margin:auto; 
        background-color: brown;

    }
</style>

and this html:

<div id="heading">
        <image src="image_files/header-background.jpg" alt="speakom"   />
    </div>

I dont know the exact size of the image.. But I want the div to wrap the image with the exact width and then I want to center that div..how do I acheive that?

Answer 1

Using inline-block will make the div the width of whatever it’s contents are, and allow you to center it with auto margins:

#heading {
    margin: 0px auto;
    display: inline-block;
}​