如何在导航栏上垂直对齐图标？

Question

我试图垂直对齐导航栏上的图标，然后尝试使用这种方法：

.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

这是我的代码：

的HTML

<div class="navbar">
  <nav>
    <ul>
      <% if logged_in? %>
        <li><%= link_to "IOAKA", dashboard_path %></li>
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :class => "icon", :id => "ioaka_icon2"), dashboard_path) %></li>
        <li><%= link_to(image_tag("icon_settings.png", alt: "geometry settings icon", 
        :class => "icon", :id => "settings_icon"), edit_user_path(current_user)) %></li>
        <li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon", 
        :class => "icon", :id => "logout_icon"), logout_path, method: "delete") %></li>
      <% else %>
        <li><%= link_to "IOAKA", root_path %></li>
        <li><%= link_to(image_tag("icon_login.png", alt: "geometry login icon", 
        :class => "icon", :id => "login_icon"), login_path) %></li>
        <li><%= link_to(image_tag("icon_signup.png", alt: "geometry signup icon", 
        :class => "icon", :id => "signup_icon"), signup_path) %></li>
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :class => "icon", :id => "ioaka_icon1"), root_path) %></li>
      <% end %>
    </ul>
  </nav>
</div>

的CSS

/*--------------------------------HEADER--------------------------------------*/

ul {
  list-style-type: none; /* Removes the bullets. A navigation bar does not need list markers */
  margin: 0; /* to remove browser default settings */
  padding: 0; /* to remove browser default settings */
  text-align: left; /* solves the behavior of center because of body tag text-align center */
}


li {
  display: inline; /* By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line */
}

a:link {
  text-decoration: none; /* unvisited link remove default undline */
}

a:active {
  color: black;  /* selected link remove default red color */
}

.icon {
  float: right; /* use float to get block elements to slide next to each other */
}

#ioaka_icon1 {
  height: 50px;
}

#signup_icon {
  height: 44px;
}

#login_icon {
  height: 50px;
}

.navbar {
  max-width: 100%;
  height: 65px;
  line-height: 65px; /* Aligns text vertically to the div the value has to be the same as the div! */
  background-color: white;
  border-bottom: #cfcfcf 3px solid;
}

如果在这种情况下使用：

.nav ul {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

看来元素只会到达50%顶部（transform: translateY(-50%);）和top: 50%; 没有做任何改变？

问题：我缺少什么，为什么它不起作用？提前致谢！

Answer 1

这里有两种方法可以垂直对齐导航部分中的导航项目。

HTML（两个示例相同）

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

演示 0：起点

方法一：弹性盒

CSS

nav {
    display: flex;             /* establish flex container */
    align-items: center;       /* center ul container vertically */
    justify-content: center;   /* center ul container horizontally (optional) */
}

演示 1

方法二：绝对定位

nav {
    position: relative;  /* establish containing block (nearest positioned ancestor) for
                            absolute positioning */
}

ul {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

演示 2a

如果要垂直和水平居中导航项目，请进行以下调整：

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; /* center nav items inside nav container */
    width: 75%;         /* to prevent overflow of nav items for demo */
}

演示 2b

对于涉及表属性的第三种方法，请在此处查看我的答案：https : //stackoverflow.com/a/31977476/3597276

要了解有关 flexbox 的更多信息，请访问：

• 使用 CSS 弹性盒子~ MDN
• Flexbox 完整指南~ CSS-Tricks

浏览器支持： 除 IE < 10 外，所有主流浏览器都支持Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。