Как выровнять div в центре страницы - PullRequest
Новая
       6

Как выровнять div в центре страницы

0 голосов
/ 21 января 2012

Я создаю мобильный сайт и застрял в проблеме. У меня есть основной div и внутри него три div. Ранее я хотел, чтобы он был выровнен по левому краю, но теперь я хочу выровнять эти три div по центру страницы. то есть, если экран устройства широкий, он должен располагаться по центру, сейчас он выровнен по левому краю.

Я пробовал много способов, но не смог его получить. Вот код и CSS Я знаю, что размеры должны быть в em & не пикселях; Я исправлю это в ближайшее время. 

<div class="main-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- MAIN BUTTONS ENDS HERE -->


.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

Ответы [ 2 ]

0 голосов
/ 27 января 2012

Я получил решение, мне просто нужно было добавить еще одну строку css и поместить туда мои sub div'ы внутри этого div.Так как я не хочу добавлять ширину к моему основному родительскому div, я добавил еще один div и дал ему {margin:0 auto;}.Я не знаю, является ли этот метод правильным, но он решил мою проблему. 

<div class="main-buttons">
<div class="sub-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- SUB DIV ENDS HERE -->
</div><!-- MAIN BUTTONS ENDS HERE -->

CSS: 

.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}
.sub-buttons{ width:202px; height:42px; margin:0 auto;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }
0 голосов
/ 21 января 2012

Вы можете достичь этого в CSS, установив свойство margin.

Для родительского div используйте следующую css, и она должна нормально работать 

.main-contents
{
    margin: 10px auto; 
    height:42px; 
    padding:5px 10px 5px 10px; 
    background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;
    overflow: hidden;
}

.box1, .box2, .box3
{
    float:left;
}
...