垂直對齊子元素

-1

我試圖垂直對齊我的主頁上的導航欄中的元素。裏面的div是一個ul，裏面有一個標籤在裏面。到目前爲止，垂直對齊還沒有真正奏效。這裏的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; 
    } 
    } 
}

在此先感謝您的幫助！

來源

2013-06-03 Keith Johnson

任何機會，你可以設置簡化[jsfiddle]（http://jsfiddle.net）？ – Adrift

順便說一句，那不是「css」 – Ven

@ user1737909，什麼不是CSS？ – Ryan

-1

如果你的導航欄是固定高度，請嘗試以下操作：

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

明顯改變取決於杆的高度尺寸。

來源

2013-06-03 15:20:27 Ryan

-1

嘗試postition:relative在父div /包裝上。然後將position:relative添加到子元素。您應該可以添加top：0px。這會將子元素與相對包裝的頂部對齊。

希望這會有所幫助。

來源

2013-06-03 15:29:01 JDavies

垂直對齊子元素

回答

相關問題