-2

Having some problems centering a 100% image inside a div on a responsive site I am trying to build.

Tried margin:auto and text-align:center....

Are there any other options to center a image within a div, or even the div. where the actual width of the div isn't specified?

<div class="hoods"><a href="http://example.com.com/hoods"><img    src="http://example.com.com/image/data/Home Page  /hoods.jpg" ></a></div>

.hoods {
float: left;
margin-bottom: 20px;
width: 96%;
}

.hoods > a > img {
border-style: solid;
border-width: 10px;
max-height: 236px;
max-width: 92.5%;
}
Molder
  • 121
  • 8
  • If a divs width isn't specified it will be 100% of the parent unless floated or otherwise affected by CSS. – Paulie_D Nov 30 '15 at 13:18
  • 2
    It's not clear what you are asking....what are you trying to center, the div or the image in the div? - http://jsfiddle.net/z1spcw12/ – Paulie_D Nov 30 '15 at 13:21
  • Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – easwee Nov 30 '15 at 17:04

1 Answers1

1

Inline Centering

When you have an image, which should be centered, then you can do it in two ways. Just for an inline image, with dynamic width and height. You can do the following:

.center-image {text-align: center;}
.center-image img {display: inline-block;}
<div class="center-image">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
</div>

Preview:

Dead Centre (Absolutely Centering in the Whole Window)

If you wanna do a dead-center, then you can use translate():

.center-image {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.center-image img {display: inline-block;}
<div class="center-image">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
</div>

Preview:

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252