css - 我不知道为什么我的图片没有 float 到中心

Question

我需要我的图像在中心，但出于某种原因不是这样。
我的 HTML 代码:

<div class="face-img">
    <img id="profile-img" src="http://host2post.com/server13/photos/jI7X5kXAIEk_4M~/1680x1050-lake-tahoe-california-desktop-wallpaper-background.jpg" />
</div>

还有我的 CSS 代码:

.face-img{
  display: inline-block;
}
#profile-img{
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.face-img #profile-img{
    float: center;

http://jsfiddle.net/BBaughn/e941djLg/

Answer 1

作为MDN states , text-align 属性需要在父元素上:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

由于 img 元素默认是 inline ，text-align: center 将有效地将子 img 居中> 父元素中的元素。

Updated Example

在你的情况下，你只需要删除 display: inline-block 因为这会导致父级有一个 "shrink to fit" width (这意味着父元素与子元素的宽度相同，因此看不到居中)。

.face-img {
  text-align: center;
}

此外，center 不是 float property 的有效值.