Question

我正在尝试创建一个需要水平居中的图像滑块。为了使height正常工作，我需要将滑块的position设置为absolute。为了使滑块居中，我尝试将左右设置为自动，如下所示。

#slider{
 position: absolute;
 width:80%;
 height:50%;
 left:auto;
 right:auto;
}

但这不起作用。我添加了一个代码片段，您可以在其中查看其余代码。

有人还可以告诉我为什么height在没有position:absolute;

的情况下无效

$(document).ready(function(){
	$('.active').css('display','inline')
});

body{
	margin: 0px;
}
#slider{
    position:absolute;
	width:80%;
	height:50%;
	left:auto;
	right:auto;
}
#slider img{
	width:100%;
	height:100%;
	position: absolute;
	z-index: -5;
}
.active{
	z-index: 1;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
		<img src="http://icanbecreative.com/res/AbstractBg/green_abstract-wide.jpg" data-slide="1" class="active"/>
		<img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05           /3d-abstract-hd-wallpaper.jpg" data-slide="2"/>
		<img src="http://freewallpaperspot.com/wallpapers/abstract-wallpaper-hd-3.jpg" data-slide="3"/>
	</div>

Answer 1

添加此项会将其水平对齐

#slider {
 position: absolute;
 width: 80%;
 height: 50%;
 left: 50%;
 transform: translatex(-50%);
}

Answer 2

如果您希望将其置于position:absolute的中心位置，只需添加

即可

left: 50%;
margin-left: -50% of container width

这是居中元素的典型方式，但请记住该位置：绝对值将根据最近的父级非静态位置进行计算

Answer 3

您要求将滑块absolute定位（即使用手动坐标），然后您抱怨它不能自动定位？嗯。： - ）

将其设为position: relative。

为什么离开：auto;右：自动不以div为中心？

3 个答案: