0

I was trying to align a div to the center inside of another div. I searched, and all answers say to put "margin:auto;" or "margin: 0px auto;". I tried both, and neither will work.

My CSS is:

#slider div
{
    margin:0px auto;
    width:620px;
}

EDIT: I've tried all that has been suggested so for, no change for anything. Could it be that #slider is Jquery???

As requested, here is the entire pages code:

<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>
NickTheGreat
  • 150
  • 1
  • 2
  • 9
  • How big is `#slider`? Please set up a jsFiddle demo because your question seems to leave too much things open. – kapa Aug 09 '12 at 23:44
  • this might be what you're looking for: http://stackoverflow.com/questions/114543/how-to-center-div-in-div – dplante Aug 09 '12 at 23:45
  • You may have to add `position: relative;` – D.A Aug 09 '12 at 23:46
  • Note: I guess nobody requested for this code dump. If you set up a jsFiddle demo that demonstrates your problem, it will be much easier for us to tweak it, and find the solution. – kapa Aug 10 '12 at 00:56

3 Answers3

0

You can use absolute positioning​

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

Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
0

It would be easier to see what's up if you posted the whole code.

Anyway use this css for child div:

position: relative;
margin: 0 auto;

And this css for the parent one:

text-align:center;
margin: 0 auto;

And tell me if it works or not.

Cyber
  • 372
  • 1
  • 9
  • Sorry to hear that it did not work for you. Unfortunately, as I said above it's near to impossible to help you not seeing full css/html code because obviously something is overriding the divs positioning. – Cyber Aug 10 '12 at 00:22
  • I have a jquery plugin called easyslider 1.7, could that be the problem? – NickTheGreat Aug 10 '12 at 00:30
  • I've got no idea. Try to disable it temporarily and see if this is what causes the problem. – Cyber Aug 10 '12 at 00:35
  • I disabled easyslider, and nothing changed except the jquery slider. – NickTheGreat Aug 10 '12 at 00:45
  • Ok, I see now the code so it will be easy to figure it out. I presume you're looking for to center #slider inside #sliderContain am I right? If so here it is: http://jsfiddle.net/aNLdj/ . I only added background color and width to container to visualize positioning. btw in your style you put `#slider div {}` it won't work, you would rather want `div #slider {}` . – Cyber Aug 10 '12 at 01:24
  • And one more fiddle with slider script, jquery and pics on! http://jsfiddle.net/aNLdj/1/ :) – Cyber Aug 10 '12 at 01:42
0

You can try this:

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

If that does not work, you can do the same as above, just change the margin-left to:

margin-left:-25%;

Hope that helps.

jQuery stuff can be aligned with CSS, if "#slider div" is still not aligned, you should check the other elements in the CSS, they could be affecting #slider.

Or your problem might be that the code should be:

#slider {
    code in here 
}

You do not need to state that the element is a div. "#slider div" refers to the div in the slider(child div), not the slider it self(parent div). Correct me if I had misunderstood.

Appyze Apps
  • 78
  • 1
  • 2
  • 6