我有一個img拒絕中心，我無法弄清楚爲什麼？

我似乎無法將我擁有的圖像居中。該圖像位於div，由2個其他圖像包圍。我試過text-align並將margin設置爲auto，但這似乎不起作用。下面的幻燈片slider div應該居中，但事實並非如此。我有一個img拒絕中心，我無法弄清楚爲什麼？

這裏的HTML：

<body> 
<div id = "container"> 
    <h1> 
    Meet some of of our Members 
    </h1> 
    <img id="prev" src="images/rsz_back-button.png" alt="prev"> 
    <div id="Slider"> 
    <div class = "slide active"> 
     <div id ="slide-copy"> 
     <h2> 
     Echo 
     </h2> 
     </div> 
     <img src="images/rsz_a0615655ad9ed49f75bf617e2df6a47c.jpg"> </div> 

    <div class = "slide"> 
    <div id ="slide-copy"> 
     <h2> 
     Victor 
     </h2> 
    </div> 
    <img src="images/rsz_dollhouse-tv-show-2.jpg"> </div> 
    <div class = "slide"> 
    <div id ="slide-copy"> 
     <h2> 
     Sierra 
     </h2> 
    </div> 
    <img src="images/rsz_0000053222_20081110111439.jpg"> </div> 
    <div class = "slide"> 
    <div id ="slide-copy"> 
     <h2> 
     Alpha 
     </h2> 
    </div> 
    <img src="images/rsz_1alan-tudyk-transformers.jpg"> </div> 
    </div> 
    <img id="next" src="images/rsz_forward-button.png" alt="next"> </div> 
</body>

這裏是CSS：

*{ 
    margin:0; 
    padding:0; 
} 

body{ 
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    color:#fff; 
    background:#333; 
    line-height:1.6em; 
} 

a{ 
    color:#fff; 
    text-decoration:none; 
} 

h1{ 
    text-align:center; 
    margin-bottom:20px; 
} 

#container{ 
    text-align:center; 
    width: 980px; 
    margin:40px auto; 
    overflow:hidden;  
} 

#slider{ 
    margin:40px auto; 
    position:relative; 
    width:512px; 
    height:385px; 
    overflow: hidden; 
    float: left; 
    padding:3px; 
    border: #666 solid 2px; 
    border-radius:2px; 
    z-index:0; 

} 

slider img{ 
    width:512px; 
    height:385; 
} 

#prev, #next{ 
    float:left; 
    padding-top:50px; 
    z-index:1; 
}

來源

2015-11-01 Kyle T

請嘗試添加小提琴。我們沒有您的文件夾「圖片」及其內容。 – Chris

你能提供更好的問題樣本嗎？也許鏈接到實際工作的代碼？或者至少jsfiddle樣本？你想要水平還是垂直居中？你也沒有寫在這裏所有的CSS - 類「幻燈片」在哪裏？這真的很重要。 ;） – Samuell

的#Slider DIV來浮動#prev DIV，其推動#Slider到右側之後。

解決方法：不要浮動#prev。或者清除#Slider中的浮動，無論你想要什麼。（如果你的目的是在屏幕左邊顯示#prev，請給它position:absolute或其他東西。）

順便說一下，在你的HTML中存在錯誤。 ID slide-copy出現兩次。
和你的CSS錯誤。 385應該是385px，並且slider和#slider應該都是#Slider。

來源

2015-11-01 08:43:19

謝謝，這種工作。還要感謝我的錯誤。我仍然使兩者都浮動，但將浮動移動到css #slider {}的底部似乎可以修復它。 –

如果解決方案有效，您可以通過單擊左側的複選標記來接受此答案。這樣，它就不會出現在未解決的問題列表中。但是，如果它只是「一種」的作品，那麼應該做些什麼來改進它呢？ –

我猜這是滑塊中的大寫小寫字母「s」，我在HTML中意外大寫，因爲之後這一切都發生了變化。 –

我有一個img拒絕中心，我無法弄清楚爲什麼？

回答

相關問題