中心对齐图像

Question

我正在尝试将此图像对齐到页面的中心。我试过“（在正文中）”“text-align：center;并显示：inline-block;（在css中）”但它们不起作用。

这是JSFiddle：http://jsfiddle.net/4TtHR/1/

这是CSS：

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

Answer 1

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

Answer 2

您正试图将浮动元素居中。

您只需将其包装在div中，将其设置为display:inline-block即可包含子元素。然后将text-align:center应用于parent，以便div。

居中

jsFiddle here