-3

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. –  Oct 20 '13 at 02:00
  • http://jsfiddle.net/4TtHR/9/ – megawac Oct 20 '13 at 02:04
  • @megawac Nope doesn't work. Check your work sir. –  Oct 20 '13 at 02:07

2 Answers2

1
figure {
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 50%;
}
IRONLORD
  • 163
  • 1
  • 12
0

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

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304