Вертикальное выравнивание дочерних элементов

Question

Я пытаюсь вертикально выровнять элементы в навигационной панели на моей домашней странице. Внутри div есть ul, у которого есть li с тегами в них, как. Пока вертикальное выравнивание действительно не сработало. Вот HAML:

.navcontainer 
    %div#middle 
    %ul#nav 
     %li 
     = link_to 'About', '#' 
     %li#signup 
     = link_to 'Sign Up', '#', :id => "signup" 
     = render 'devise/registrations/new' 
     %li#login 
     = link_to 'Login', '#', :id =>'login' 
     = render 'devise/sessions/new' 

И вот ассоциированная CSS, гм, SASS:

// Nav Bar 
.navcontainer{ 
    width: 100%; 
    background: $gray; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 60px; 

    ul li{ 
    float: left; 
    list-style: none; 
    a{ 
     color: white; 
     text-decoration: none; 
     float: left; 
     font-family: Domine; 
     text-transform: uppercase; 
     font-size: 25px; 
     padding-left: 15px; 
     -webkit-transition-duration: 0.35s; 
     &:visited{ 
     color: white; 
     text-decoration: none; 
     } 
     &:hover{ 
     color: $hovercolor; 
     -webkit-transition-duration: 0.35s; 
     } 
    } 
    } 
} 

// RegistrationFields and Partials 
.registration{ 
    display: inline-block; 
    #new_user{ 

    input { 
    border-radius: 10px; 
    height:26px !important; 
    padding: 0px; 
    display: inline-block; 
    float:left; 
    border:none; 
    margin-left: 5px; 
    padding: 0 5px 0 5px; 
    } 
    } 
} 

Заранее спасибо за помощь !!

Answer 1

Если навигационная панель является фиксированной высотой, попробуйте следующее:

.navcontainer div ul { 
    margin-top: 10px; 
} 

явно изменяет размер в зависимости от высоты бара.

Answer 2

Попробуйте postition:relative На родительском div/wrapper. Затем добавьте position:relative к дочернему элементу. Затем вы можете добавить top: 0px. Это приведет к выравниванию дочернего элемента в верхней части относительной оболочки.

Надеюсь, это поможет.