Центр div, состоящий из серии кнопок с использованием CSS - PullRequest
Новая
       37

Центр div, состоящий из серии кнопок с использованием CSS

1 голос
/ 15 декабря 2011

это может показаться простым, я сделал блок div, состоящий из кнопок, которые должны лежать горизонтально одна за другой.Кнопки используются для навигации, и количество кнопок изменяется динамически в зависимости от веб-страниц.

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

<div class="container">
    <div class="content">
    </div>
    <div class="navButtons">
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a> 
    </div>
</div>

Я пытался использовать поле: 0 авто;

поле слева: авто;margin-right: auto;

Но безуспешно, они просто придерживаются левой стороны страницы.

Вот CSS для: 

.container{    
    background: url('images/gray_bg.jpg');
    width: 900px;
    height: 800px;
    margin: 0 auto;        
    position: relative;
    overflow: auto;      
}

.navButtons{
    margin: 0 auto;
    float: left;         
}

Любой товаридеи о том, как это можно решить

Спасибо

Ответы [ 2 ]

3 голосов
/ 15 декабря 2011

Теги являются встроенными элементами, которые вы можете просто сделать: 

div.navButtons {
    text-align: center;
}

см. Эту скрипку, чтобы понять, что я имею в виду: http://jsfiddle.net/c4urself/ZvrZW/

1 голос
/ 15 декабря 2011

Хорошо, используя немного HTML с CSS, то, что вы хотите, довольно легко сделать, вот ссылка на jsfiddle

CSS 

div.container {
    width: 100 % ;
    height: 100 % ;
}
div.content {
    position: absolute;
    top: 0em;
    width: 100 % ;
    bottom: 2em;
    overflow - y: auto;
}
div.navButtons {
    width: 100 % ;
}.navButtons {
    position: absolute;
    bottom: 0px;
    left: auto;
}

HTML 

<div class="container">
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 

    </div>
    <div class="navButtons">
        <center>
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a>     
               </center>
        </div>
</div>

jsFiddle

...