我不知道爲什麼我的照片沒有漂浮到中心

我需要我的圖像在中心，但它不是由於某種原因。
我的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

我不知道爲什麼我的照片沒有漂浮到中心

回答

相關問題