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

我需要我的图像在中心，但它不是由于某种原因。
我的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/

来源

2015-04-02 Brendon Baughn

'float：center'不存在。 http://www.w3schools.com/css/css_float。asp – 2015-04-02 14:39:02

由于MDN states，该text-align财产必须是父元素：

的text-align CSS property描述了如何像tex这样的内联内容t在其父块单元中对齐。文本对齐不控制块元素本身的对齐方式，仅控制其内联内容。

由于img元素inline默认情况下，text-align: center将有效中心父项子img元素。

Updated Example

你的情况，你只需要删除，因为这display: inline-block是造成父母有"shrink to fit" width（这意味着父元素是相同的宽度孩子，因此没有中心可见）。

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

而且，center不是为float property的有效值。

来源

2015-04-02 14:39:12

这不是在我的代码工作：/ – 2015-04-02 14:41:08

我刚刚在JSFiddle.net试过，没有工作 – 2015-04-02 14:46:37

@BrendonBaughn那么，它在我链接到的一个 - http://jsfiddle.net/ag1zphw8/ – 2015-04-02 14:47:23

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

来源

2015-04-02 14:49:09

非常感谢你 – 2015-04-02 14:50:13

我很高兴我的帮助！ :) – 2015-04-02 14:52:16

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

使用汽车在img的左右边距图片居中在页面中间。余量：0自动0自动;

拨弄例如

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="">

来源

2015-04-02 14:51:55

以下CSS的工作原理：

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

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

来源

2015-04-02 16:05:58 coderz

以下工作：

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

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

来源

2015-04-06 00:38:06

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

回答

相关问题