在CSS中將圖片居中時遇到問題

Question

我正在嘗試在div中水平居中放置圖像。 但是，我沒有。 我試過將vertical-align設置為中間，將margin設置為auto，將auto設置為0，並且可以想到所有變化。 什么都沒有。 這是當前設置方式的代碼：

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

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

該圖像位於簡介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

使用.intro position:relative並使用下面的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 3

CSS樣式margin: 0 auto; 應該做技巧的水平部分。 對於垂直部分，您還需要照顧父母。 有關更多信息，請參見如何在div中垂直對齊圖像 。

Answer 4

vertical-align僅在表格單元格中有效。 嘗試使用Flexbox 。 包含圖像的元素應具有CSS屬性：

display: flex;
align-items: center;