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

在父div / wrapper上尝试postition:relative。然后将position:relative添加到子元素。然后你应该能够添加top：0px。这会将子元素与相对包装器的顶部对齐。

希望这有帮助。

垂直对齐子元素

2 个答案: