Question

我一直在尝试我能想到的一切，（不是很擅长）我试图将文本垂直放在这些按钮中，这是代码：

<div id="menu">
            <ul class="clearfix">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#"><i class="fa fa-hdd-o"></i> Services</a></li>
                <li><a href="#"><i class="fa fa-area-chart"></i> Pricings & plans</a></li>
                <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
                <li><a href="#"><i class="fa fa-users"></i> The Team</a></li>
              <!--  <li><a href="#"><i class="fa fa-sign-in"></i> Login</a></li>
                <li><a href="#"><i class="fa fa-user"></i> Register</li>-->
            </ul>

和CSS：

#menu {
margin: 20px auto 0 auto;
width: 60%
}
#menu ul {
padding:0px;
list-style-type:none;
}
#menu a {
background-color: #EBEBEB;
font-size: 15px;
line-height: 10px;
height: 60px;
width: 100px;
position: relative;
padding: 0 20px;
float: left;
margin-top: 5px;
display: block;
color: #385c5b;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
border-color:#eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin-bottom: 5px;
}
#menu a:hover {
background-color:#5ba4b5;
}
#menu li {
float:left;
display:block;
margin-right:5px;
}

感谢您的回复或其他技术。

Answer 1

您可以使用line-height查看此http://jsfiddle.net/sfnxkav5/

#menu ul li a{
line-height:50px;
}

这不会让它完全居中，但它适合你给出的高度

Answer 2

您可以在锚标记上使用display:table-cell

JSfiddle Demo

#menu {
  margin: 20px auto 0 auto;
  width: 60%
}
#menu ul {
  padding: 0px;
  list-style-type: none;
}
#menu a {
  background-color: #EBEBEB;
  font-size: 15px;
  height: 60px;
  width: 100px;
  position: relative;
  padding: 0 20px;
  margin-top: 5px;
  color: #385c5b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  border-radius: 3px 3px 0 0;
  border-color: #eaeaea;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);

  display: table-cell;
  vertical-align: middle;

}
#menu a:hover {
  background-color: #5ba4b5;
}
#menu li {
  float: left;
  display: block;
  margin-right: 5px;
  margin-bottom: 5px;
}

<div id="menu">
  <ul class="clearfix">
    <li><a href="#"><i class="fa fa-home"></i> Home</a>
    </li>
    <li><a href="#"><i class="fa fa-hdd-o"></i> Services</a>
    </li>
    <li><a id="a" href="#"><i class="fa fa-area-chart" ></i> Pricings & plans</a>
    </li>
    <li><a href="#"><i class="fa fa-envelope"></i> Contact</a>
    </li>
    <li><a href="#"><i class="fa fa-users"></i> The Team</a>
    </li>
    <!-- <li><a href="#"><i class="fa fa-sign-in"></i> Login</a></li>
                <li><a href="#"><i class="fa fa-user"></i> Register</li>-->
  </ul>

在菜单按钮中移动文本

2 个答案: