垂直对齐子元素答案

【问题标题】：Vertically Aligning Child Elements垂直对齐子元素
【发布时间】：2013-05-29 19:14:57
【问题描述】：

我正在尝试垂直对齐主页导航栏中的元素。 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; 
    }
  }
}

提前感谢您的帮助！

【问题讨论】：

有没有机会设置一个简化的jsfiddle？
顺便说一句，这不是“css”
@user1737909，什么不是 CSS？
刚刚回到这个，它的工作原理，谢谢德里克！
不知道为什么会有这么多反对意见

标签： html css haml vertical-alignment navbar

【解决方案1】：

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

如果您的导航栏是固定高度，请尝试以下操作：

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

显然根据栏的高度改变大小。

【讨论】：