html – 如何垂直对齐导航栏上的图标？

概述我试图垂直对齐导航栏上的图标,我尝试使用这种方法： .element { position: relative; top: 50%; transform: translateY(-50%);} 这是我的代码： HTML <div class="navbar"> <nav> <ul> <% if logged_in? %> <li><%= link_t 我试图垂直对齐导航栏上的图标,我尝试使用这种方法：

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

这是我的代码：

HTML

<div >  <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",:ID => "settings_icon"),edit_user_path(current_user)) %></li>        <li><%= link_to(image_tag("icon_logout.png",alt: "geometry logout 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",:ID => "login_icon"),login_path) %></li>        <li><%= link_to(image_tag("icon_signup.png",alt: "geometry signup icon",:ID => "signup_icon"),signup_path) %></li>        <li><%= link_to(image_tag("icon_ioaka.png",: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％);)和顶部：50％;不做任何改变？

问题：我错过了什么,为什么它不起作用？提前致谢！

解决方法 以下是两种在导航部分中垂直对齐导航项的方法.

HTML(两个示例都相同)

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

DEMO 0: Starting Point

方法1：FlexBox

CSS

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

DEMO 1

方法2：绝对定位

nav {    position: relative;  /* establish containing block (nearest positioned ancestor) for                            absolute positioning */}ul {    position: absolute;    top: 50%;    transform: translateY(-50%);}

DEMO 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 */}

DEMO 2b

对于涉及表属性的第三种方法,请参阅我的答案：https://stackoverflow.com/a/31977476/3597276

要了解有关flexBox的更多信息,请访

> Using CSS flexible boxes~MDN
> A Complete Guide to Flexbox~css-Tricks

浏览器支持：所有主流浏览器都支持FlexBox,@L_301_7@.一些最新的浏览器版本,如Safari 8和IE10,需要vendor prefixes.要快速添加前缀,请使用Autoprefixer. this answer中的更多详细信息.

总结

以上是内存溢出为你收集整理的html – 如何垂直对齐导航栏上的图标？全部内容，希望文章能够帮你解决html – 如何垂直对齐导航栏上的图标？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。