CSS居中对齐
CSS居中对齐
提问于 2012-08-10 07:42:52
我试图将一个div与另一个div中的中心对齐。我搜索了一下，所有的答案都写着"margin:auto;“或者"margin: 0px auto;”。我两个都试过了，都不管用。
我的CSS是：
#slider div
{
margin:0px auto;
width:620px;
}编辑:我已经尝试了所有的建议，没有任何改变。会不会#slider是Jquery？
按照要求，下面是整个页面的代码：
<html>
<head>
<script type="text/javascript" src="C:\Users\Pam\Desktop\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\Pam\Desktop\easyslider1.7\js\easyslider1.7.js"></script>
<style type="text/css">
body
{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-image:url('./bg.jpg');
}
#headerCon
{
display:block;
background-color:#151515;
width:100%;
height:40px;
padding-left:auto;
padding-right:auto;
position:fixed;
}
#header
{
width:950px;
height:100%;
margin-right:auto;
margin-left:auto;
}
#menu
{
margin-left:10%;
}
#title
{
background-image:url('./title.png');
background-repeat:no-repeat;
display:block;
height:123px;
margin:0px auto;
text-align:center;
}
#container
{
text-align:center;
display:block;
width:850px;
margin-right:auto;
margin-left:auto;
height:100%;
/* background-color:#dfdfdf; */
max-padding:100%;
position:relative;
}
a.link
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
}
a.link:hover
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
background-color:#252525;
}
p
{
color:#fff;
font-family:Arial,Helvetica,sans-serif;
}
#button1
{
margin-left:34%;
}
/* EASY SLIDER */
#slider div
{
position: absolute;
top: 50%;
left: 50%;
margin-top:2px;
margin-left:2px;
width:620px;
}
#sliderContain
{
position:absolute;
margin-left:3px;
margin-top:3px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:620px;
height:230px;
overflow:hidden;
}
#transBorder
{
background-color:#111111;
opacity:0.60;
filter:alpha(opacity=60); /* For IE8 and earlier */
display:block;
height:236px;
width:626;
position:absolute;
z-index:-1;
float:up;
}
#slider1prev
{
display:none;
}
#slider1next
{
display:none;
}
</style>
</head>
<body>
<div id="headerCon">
<div id="header">
<div id="menu">
<a href="" id="" class="link"> Home </a>
<a href="" id="" class="link"> Monsters </a>
<a href="" id="" class="link"> Areas </a>
<a href="" id="" class="link"> Trades</a>
<a href="" id="" class="link"> Classes </a>
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<div id="container">
<div id="title"> </div>
<div id="sliderContain">
<div id="slider">
<ul>
<li><img src="./reddragon.png"/></li>
<li><img src="./swamp.png"/></li>
<li><img src="./town.png"/></li>
</ul>
</div>
</div>
<div id="transBorder">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2012-08-10 07:56:47
如果你发布了完整的代码，你会更容易看到发生了什么。
无论如何，对子div使用此css：
position: relative;
margin: 0 auto;父级的css如下：
text-align:center;
margin: 0 auto;告诉我它能不能用。
Stack Overflow用户
发布于 2012-08-10 07:50:56
您可以使用绝对定位
#one {
background: red;
position: relative;
}
#two {
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* negative half of height */
margin-left: -150px; /* negative half of width */
background: blue;
} http://jsfiddle.net/3kj6A/
Stack Overflow用户
发布于 2012-08-10 08:38:22
您可以尝试这样做：
#slider div
{
position: absolute;
left: 50%;
margin-left:-310px;
width:620px;
}如果这不起作用，您可以执行与上面相同的操作，只需将空白处-left改为：
margin-left:-25%;希望这能有所帮助。
jQuery的东西可以与CSS对齐，如果"#slider div“仍然没有对齐，你应该检查CSS中的其他元素，它们可能会影响#slider。
或者你的问题可能是代码应该是：
#slider {
code in here
}您不需要声明元素是div。"#slider div“是指滑块中的div (子div)，而不是滑块本身(父div)。如果我误解了，请纠正我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11893548
复制相关文章
相似问题
腾讯云开发者
