在CSS中定位圖像時出現問題

Question

我想在div內水平居中放置圖像。但是，我一直無法。我試過將垂直對齊設置爲中間值，將邊距設置爲自動，0自動，以及我能想到的每一個變化。什麼都沒有以下是目前設置的代碼：

img { 
border: 0; 
margin: 0 auto; 
} 

.intro img { 
border-radius: 50%; 
vertical-align: middle; 
padding: 10px; 
} 

圖像位於intro div。任何建議你可以給予幫助。

Answer 1

如果要居中圖像在水平方向垂直&，這應該做的伎倆：

.intro { 
 
    display: table; 
 
    width: 500px; /* works with any width */ 
 
    height: 150px; /* works with any height */ 
 
    background: #ccc; 
 
} 
 

 
.imgcontainer { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    background: #fff; 
 
    padding: 10px; 
 
    border-radius: 50%; 
 
}

<div class="intro"> 
 
    <div class="imgcontainer"> 
 
    <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> 
 
    </div> 
 
</div>

Answer 2

vertical-align作品只在表格單元格。嘗試使用Flexbox。包含圖像的元素應該有CSS屬性：

display: flex; 
align-items: center; 

Answer 3

使用position:relative在父母.intro和使用img如下所示的代碼，它會與任何width和height

display:block; 
    margin:auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0 

工作摘錄

.intro { 
 
    border: dashed red; /* demo */ 
 
    display:inline-block; /* demo */ 
 
    vertical-align:top; /* demo */ 
 
    position: relative 
 
} 
 
.intro img { 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    display: block; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0 
 
} 
 
.intro:first-of-type { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.intro:last-of-type { 
 
    width: 400px; 
 
    height: 300px; 
 
}

<div class="intro"> 
 
    <img src="//lorempixel.com/100/100" /> 
 
</div> 
 
<div class="intro"> 
 
    <img src="//lorempixel.com/100/100" /> 
 
</div>

Answer 4

css風格margin: 0 auto;應該做技巧的水平部分。 對於垂直部分，您還需要照顧父母。 查看How to vertically align an image inside div瞭解更多信息。