세로 정렬 자식 요소

Question

내 홈페이지에서 navbar의 요소를 세로로 정렬하려고합니다. div 안에는 ul이 있는데 그 안에 li가 들어있는 태그가 있습니다. 지금까지 수직 배열은 실제로 작동하지 않았습니다. SASS, 에헴,

.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의 : 다음은 HAML입니다 도움에 미리

// 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

부모 div/래퍼에서 postition:relative을 시도하십시오. 그런 다음 position:relative을 하위 요소에 추가하십시오. 그런 다음 상단 : 0 픽셀을 추가 할 수 있어야합니다. 그러면 자식 요소가 상대 래퍼의 맨 위에 정렬됩니다.

희망이 도움이됩니다.