Как выровнять ul к центру в Skeleton?

Question

Очень новый для front-end. Я проектирую свой сайт с помощью Skeleton Responsive Framework, и у меня возникают проблемы с размещением навигации в нижнем колонтитуле в центре мобильного макета. В настоящее время он выравнивается по левому краю.

Я предполагаю, что нацеливаю что-то неправильно. Кто-нибудь может помочь?

Вот код, который я использую:

<div class="band bottom">
     <footer class="container last">
         <hr>       
            <div class="sixteen footer-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>           
            </div>

            <div class="eight columns credit">
               <p>&copy; 2013 Jacob Taylor</p>
            </div>

     </footer> <! --- End Container --->
</div>  <! --- End Band --->    

А вот CSS для настольной и мобильной версии соответственно:

/* Footer */

.bottom footer {
    font-size: 12px;
}

div.footer-nav ul,
div.footer-nav ul li {
    margin: 0px;
}

div.footer-nav ul li {
    display:inline;
    float: left;
    position: relative;
}

div.footer-nav ul li a {
    display:inline-block;
    padding: 0px 21px 21px 0px;
    color: #2f3239; 
    text-decoration: none;
}

div.footer-nav ul li a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}

div.credit {
    text-align: right;
}

/* Footer */    

footer.last,
div.credit,
div.footer-nav {
    text-align: center;
}

div.footer-nav ul {
    text-align:center;  
}

Answer 1

Удалите класс.sixteen из.footer-nav и установите для него значение, меньшее 100%, то есть, возможно, десять, и добавьте margin: 0 auto к.footer-nav

Answer 2

Глядя на ваш код, кажется, что вы пытаетесь использовать объект из 16 столбцов для списка. Уменьшите количество столбцов до значения меньше двенадцати столбцов. И убедитесь, что вы используете класс "столбцы" для работы сетки.

<div class="band bottom">
 <footer class="container last footer">
        <hr>
        <div class="twelve columns footer__links">
            <ul class="nav--footer">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
            </ul>           
        </div>
        <div class="four columns">
            <div class="credit">&copy; 2013 Jacob Taylor</div>
        </div>
    </footer>
</div>

С другой стороны, Ваш CSS кажется очень многословным и запутанным. Взгляните на переработанную версию вашей CSS и разметки. В идеале мы хотим избежать каких-либо дополнительных потомков-селекторов и вызывать неквалифицированный элемент, например, "div.class_name" при написании правила.

.footer {
    font-size: 12px;
}
.footer__links {
    text-align: center;
}
.nav--footer{
    margin: 0;
    padding: 0;
    display: inline;
}
.nav--footer li {
    display:inline;
    margin-right: 4em;
}
.nav--footer a {
    text-decoration: none;
    color: #2f3239; 
}
.nav--footer a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}
.credit {
    text-align: right;
}