Center align image

Question

I'm trying to align this image in the center of the page. I've tried " (in the body)" "text-align:center; and display:inline-block; (in the css)" but they don't work.

Here's the JSFiddle: http://jsfiddle.net/4TtHR/1/

Here's the CSS:

figure {
  display: inline-block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 20px 20px 0;
}

Possible dublicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1) among many others — megawac, Oct 20 '13 at 01:51
@megawac I just tried several things from that link and none of it worked. I set the margins as well as a few other things which had no result. — user2680614, Oct 20 '13 at 02:00

score 1 · Answer 1 · answered Oct 20 '13 at 02:02

1

figure {
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 50%;
}

answered Oct 20 '13 at 02:02

IRONLORD

163
1
12

score 1 · Accepted Answer · answered Oct 20 '13 at 02:04

1

You are trying to center a floated element.

You can simply wrap it in a div, set it to display:inline-block in order to contain the child element. Then apply text-align:center to the parent in order to center the div.

jsFiddle here

answered Oct 20 '13 at 02:04

Josh Crozier

219,308
53
366
287

Center align image

2 Answers2