簡體   English   中英

我的img拒絕居中,我不知道為什么?

[英]I have an img that refuses to center and I can't figure out why?

我似乎無法居中放置圖像。 該圖像位於一個由2個其他圖像包圍的div 我已經嘗試過將text-align並將margin設置為auto但是這似乎不起作用。 固定幻燈片下方的slider div應該居中,但不在中心。

這是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;
}

#Slider div #Slider在浮動的#prev div之后,該#Slider#Slider推向右側。

解決方案:不要浮動#prev 或者,您可以根據需要清除#Slider中的#Slider (如果您打算在屏幕左側顯示#prev ,請將其position:absolute或其他。)

順便說一句,您的HTML中有錯誤。 ID slide-copy出現兩次。
還有您的CSS中的錯誤。 385應該是385px ,並且slider#slider都應該是#Slider

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM