保證金：0自動定位不能在div上工作

由於一些奇怪的原因，使用margin：0 auto對齊div不起作用。我的代碼：保證金：0自動定位不能在div上工作

HTML：

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>Picture Gallery</title> 

<link rel="stylesheet" href="css/week7.css"> 

</head> 

<body> 

<h1>The Mighty Avengers</h1> 



<div class="slide1"> 
    <img src="images/hawkeye.jpg" alt="Hawkeye" /> 
    <img src="images/capmar.jpg" alt="Captain Marvel" /> 
    <img src="images/beast.gif" alt="Beast" /> 
    <img src="images/thor.jpg" alt="Thor" /> 
</div> 

<div class="slide2"> 
    <img src="images/cap.jpg" alt="Captain America" /> 
    <img src="images/ant.jpg" alt="Ant Man" /> 
    <img src="images/vision.jpg" alt="The Vision" /> 
    <img src="images/scar.jpg" alt="Scarlet Witch" /> 
</div> 



</body> 

</html>

和CSS：

html { 
background-color: gray; 
} 

h1 { 
text-align: center; 
} 

img { 

height: 250px; 
margin-left: -20px; 
width: 250px; 
} 

.slide1, .slide2 { 
display: block; 
margin: 0 auto; 
width: 85%; 
}

這類中心的其他實例沒有談到對堆棧已經任何幫助。我已經嘗試過這種做法，但沒有在類上設置顯示類型，但無濟於事。任何深入瞭解這一點將不勝感激。

來源

2015-10-25 Michael Sean Caveney

那是因爲你的形象是150像素..和你的DIV是文檔

您可以修復它做一個文本對齊的80％：中心;在.slide1，.slide2上。

來源

2015-10-25 23:08:18

首先margin: 0 auto;在你的情況下工作，但問題是另一個 - 的圖像寬度不足以完全填充的容器，所以，如果你想在這裏居中的圖像是它的一個代碼：

img:first-child { 
    margin-left: 0; 
} 

.slide1, .slide2 { 
    display: block; 
    margin: 0 auto; 
    width: 85%; 
    text-align: center; 
}

來源

2015-10-25 23:10:34

這並沒有發生在我身上，那確實是這個問題。謝謝！ –

我想這是你在尋找什麼：

Working : Demo

HTML：不改變

CSS

html { 
background-color: gray; 
} 

h1 { 
text-align: center; 
} 

img { 

height: 250px; 
margin-left: -2px; /* So that it resides side by side*/ 
width: 250px; 
} 

.slide1, .slide2 { 
display: block; 
margin: 0 auto; 
width: 500px; /* As you are having 250px for each image */   
}

來源

2015-10-25 23:10:36 divy3993

@邁克爾肖恩Caveney，這是你想要的嗎？ – divy3993

什麼是你想實現的呢？您的幻燈片div居中。我已經給他們塗了一個黃色邊框，以便你可以看到。

.slide1, .slide2 { 
    display: block; 
    margin: 0 auto; 
    width: 85%; 
    border:1px solid yellow; 
}

我也更新了您的img css，使其更具響應性，以便圖像不會換行到第二行。

img { 
    height: auto; 
    width: 25%; 
    max-width:250px; 
}

https://jsfiddle.net/Lmmb03ck/4/

希望有所幫助。

來源

2015-10-25 23:14:12 partypete25

感謝您提醒我「彩色邊框看到您的容器是他們需要的地方」的伎倆。我正在爲自己忘記這一點，因爲我不得不寫CSS。 –

保證金：0自動定位不能在div上工作

回答

相關問題