html - 垂直对齐子元素

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 / 包装器上。然后添加position:relative到子元素。然后您应该能够添加 top:0px。这会将子元素与相对包装器的顶部对齐。

希望这可以帮助。