0

我试图将一个 div 与另一个 div 的中心对齐。我搜索了，所有答案都说要放“margin：auto;” 或“边距：0px 自动；”。我都试过了，都不管用。

我的 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"> &nbsp; </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">
&nbsp;
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){   
$("#slider").easySlider({
    auto: true,
    continuous: true,
    nextId: "slider1next",
    prevId: "slider1prev"
});
});
</script>
</body>
</html>
4

3 回答 3

0

可以使用绝对定位​</p> 

#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/

于 2012-08-09T23:50:55.973 回答
0

如果您发布了整个代码，将会更容易看到发生了什么。

无论如何使用这个css作为子div：

position: relative;
margin: 0 auto;

这是父级的CSS：

text-align:center;
margin: 0 auto;

并告诉我它是否有效。

于 2012-08-09T23:56:47.383 回答
0

你可以试试这个：

#slider div
{
position: absolute;
left: 50%;
margin-left:-310px;
width:620px;
}

如果这不起作用，您可以执行与上述相同的操作，只需将 margin-left 更改为：

margin-left:-25%;

希望有帮助。

jQuery的东西可以与CSS对齐，如果“#slider div”仍然没有对齐，你应该检查CSS中的其他元素，它们可能会影响#slider。

或者您的问题可能是代码应该是：

#slider {
    code in here 
}

您无需声明该元素是 div。“#slider div”是指滑块中的div（子div），而不是它自己的滑块（父div）。如果我误解了，请纠正我。

于 2012-08-10T00:38:22.387 回答