Как мне отцентрировать этот CSS? - PullRequest
Новая
       5

Как мне отцентрировать этот CSS?

0 голосов
/ 19 февраля 2011

Вот CSS - 

#slider ul, #slider li,
#slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;

    }
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
    /* 
        define width and height of list item (slide)
        entire slider area will adjust according to the parameters provided here
    */ 
    width:500px;
    height:250px;
    overflow:hidden;

    }   
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
    display:block;
    width:30px;
    height:77px;
    position:absolute;
    left:-30px;
    top:71px;
    z-index:1000;

    }   
#nextBtn, #slider1next{ 
    left:696px;
    }                                                       
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
    display:block;
    position:relative;
    width:30px;
    height:77px;
    background:url(../images/btn_prev.gif) no-repeat 0 0;   
    }   
#nextBtn a, #slider1next a{ 
    background:url(../images/btn_next.gif) no-repeat 0 0;   
    }   

/* numeric controls */  

#slider img{
width:500px;
height:300px;

}

ol#controls{
    margin:1em 0;
    padding:0;
    height:28px;    
    }
ol#controls li{
    margin:0 10px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:28px;
    line-height:28px;
    }
ol#controls li a{
    float:left;
    height:28px;
    line-height:28px;
    border:1px solid #ccc;
    background:#b32d45;
    color:white;
    padding:0 10px;
    text-decoration:none;
    }
ol#controls li.current a{
    background:#5DC9E1;
    color:#fff;
    }
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Я хочу центрировать #slider

HTML 

<div id="slider">
<ul>
<li>IMAGE</li>
<li>IMAGE2</li>
</ul>
</div>

Ответы [ 2 ]

2 голосов
/ 20 февраля 2011

Есть два основных способа сделать это:

  1. Центрировать текст родительского элемента #slider, используя text-align: center.
  2. Если ползунок является единственным элементом вВ том же горизонтальном положении вы можете использовать поля центрирования на ползунке: #slider { margin: 0px auto; }
0 голосов
/ 20 февраля 2011
Ползунок

# имеет определенную ширину, поэтому, если вы установите для левого и правого полей значение auto, он будет централизованным. Селектор потомков 'img' не нужен, так как вы все равно используете его как контейнер для списка изображений. Разве вы не хотите, чтобы каждое изображение было центрировано внутри идентификатора слайдера? 

#slider
{
   margin:0px auto;
   width:500px;
   height:300px;
}

Все разговоры о jQuery не нужны, если их можно легко выполнить с помощью одной простой строки CSS.

...