我似乎无法将我的图像居中。该图像位于 div
中,周围有 2 个其他图像。我试过 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 紧跟在 float #prev
div 之后,它将 #Slider
推向右侧。
解决方案:不要 float #prev
。或者清除 #Slider
中的 float ,随你便。 (如果您打算在屏幕左侧显示 #prev
,请给它 position:absolute
或其他内容。)
顺便说一下,您的 HTML 中有错误。 ID slide-copy
出现了两次。
以及您的 CSS 中的错误。 385
应该是385px
,slider
和#slider
都应该是#Slider
.
关于html - 我有一个 img 拒绝居中,我不知道为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33460322/