css - How to make image centered in a larger container without having extra space beneath it? -

css - How to make image centered in a larger container without having extra space beneath it? -

i have div width beingness 460px. div's background black. contains image width beingness 400px.

i need center image in div without having space beneath image. can remove space making image display block, makes image display not in center position.

here jsfillde demo:

http://jsfiddle.net/mddc/g43pp/

here code

<div class="img-holder"> <img src="myimage.jpg" /> </div> div.img-holder { width: 460px; background-color: black; text-align: center; }

i looking css solution. div's display property has block , cannot float.

thanks , regards.

you need play margins:

.img-holder { width: 460px; background-color: black; } img { margin: 0 auto; display: block; }

css