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属性需要位于父元素上：

text-align CSS property描述了像文本这样的内联内容如何在其父块元素中对齐。 text-align不控制块元素本身的对齐，只控制它们的内联内容。

由于img元素默认为inline，因此text-align: center会有效地将子img元素置于父元素中。

Updated Example

在你的情况下，你只需要移除display: inline-block，因为这导致父母有一个"shrink to fit" width（这意味着父元素与孩子的宽度相同，因此，没有居中是可见的。

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

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

Answer 2

您需要删除display: inline-block并将text-align: center添加到face-img课程。

Answer 3

使用保证金自动解决方案的一些简化代码。它假设你不需要我省略的其他东西..

在img的左右边缘使用 auto ，图片的中心位于页面中间。 margin：0 auto 0 auto;

小提琴示例

https://jsfiddle.net/Hastig/dfo4ku4a/1/

CSS

.profile-img {
    display: block;
    margin: 0px auto 0px auto;
    height: 200px;    width: 200px;
    border-radius: 50%;
}

HTML

<img class="profile-img" src="">

Answer 4

关注css：

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

#profile-img {
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

Answer 5

以下作品：

.face-img{
   width:200px;
   margin-left:auto;
   margin-right:auto;
}
#profile-img{
  height: 200px;
  width: 200px;
  border-radius: 50%;  
}

设置div的宽度并将左右边距设置为自动。

我不知道为什么我的照片没有飘到中心

5 个答案: