我的img拒绝居中，我不知道为什么？

Question

I can't seem to center an image I have. 我似乎无法居中放置图像。 The image is in a div surrounded by 2 other images. 该图像位于一个由2个其他图像包围的div 。 I have tried text-align and setting margin to auto but that doesn't seem to be working. 我已经尝试过将text-align并将margin设置为auto但是这似乎不起作用。 The slider div below holding the slides should be centered but it's not. 固定幻灯片下方的slider div应该居中，但不在中心。

Here's the html: 这是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>

and here is the css: 这是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;
}

Answer 1

The #Slider div comes right after the floating #prev div, which pushes the #Slider to the right. #Slider div #Slider在浮动的#prev div之后，该#Slider将#Slider推向右侧。

Solution: don't float the #prev . 解决方案：不要浮动#prev 。 Or clear the float in the #Slider , whatever you want. 或者，您可以根据需要清除#Slider中的#Slider 。 (If your intention is to show the #prev to the left of the screen, give it position:absolute or something.) （如果您打算在屏幕左侧显示#prev ，请将其position:absolute或其他。）

By the way, there are errors in your HTML. 顺便说一句，您的HTML中有错误。 The ID slide-copy appears twice. ID slide-copy出现两次。
And errors in your css. 还有您的CSS中的错误。 385 should be 385px , and slider and #slider should both be #Slider . 385应该是385px ，并且slider和#slider都应该是#Slider 。

我的img拒绝居中，我不知道为什么？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-01 08:43:19

我的img拒绝居中，我不知道为什么？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-01 08:43:19

解决方案1
0 已采纳 2015-11-01 08:43:19