我知道这可能是偏离主题但我无法在中心对齐测试(垂直对齐)。 这是我的菜单代码:
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a></li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
我尝试了不同的方法来垂直居中Home
和Sign Out
(应该位于图标的中间位置),但未成功。
.home-text{
// wont't work padding-top: 30px;
// wont't work padding-bottom: 30px;
// also i tried with top:10px etc.
}
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
/*----- Toggle Button -----*/
.toggle-nav {
display: none;
}
/*----- Menu -----*/
@media screen and (min-width: 860px) {
.menu {
width: 100%;
padding: 10px 0px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 3px;
background: #4CAF50;
}
}
.menu ul {
display: inline-block;
}
.menu li {
margin: 0px 50px 0px 0px;
float: left;
list-style: none;
font-size: 17px;
}
.menu li:last-child {
margin-right: 0px;
}
.menu a {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
transition: color linear 0.15s;
}
.menu a:hover,
.menu .current-item a {
text-decoration: none;
color: #FFFFFF;
}
/*----- Search -----*/
.search-form {
float: right;
display: inline-block;
}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
.wrap {
width: 90%;
}
}
@media screen and (max-width: 860px) {
.menu {
width: 100%;
position: relative;
display: inline-block;
}
.menu ul.active {
display: none;
}
.menu ul {
position: absolute;
top: 90%;
left: 0px;
padding: 10px 10em 0em 2em;
/* menu width */
border-radius: 7px;
background: #4CAF50;
}
.menu ul:after {
width: 0px;
height: 0px;
position: absolute;
top: 0%;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.menu li {
margin: 5px 0px 5px 0px;
float: none;
display: block;
}
.menu a {
display: block;
}
.toggle-nav {
padding: 20px;
/* squere element size */
float: left;
display: inline-block;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: #4CAF50;
color: #FFFFFF;
font-size: 25px;
transition: color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover,
.toggle-nav.active {
text-decoration: none;
color: #FFFFFF;
}
}
.home-text {
color: red;
padding-top: 30px;
padding-bottom: 30px;
display: inline-block;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item">
<a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a>
</li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
答案 0 :(得分:2)
只需将vertical-align: middle
添加到li
,就像这样,它会正常工作
.menu li * {
vertical-align: middle;
}
示例代码段
.menu li {
list-style-type: none;
}
.menu li * {
vertical-align: middle;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a></li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
&#13;
答案 1 :(得分:1)
.home-text, .sign-out-text{
display: inline-block;
padding-bottom: 25px;
vertical-align: middle;
padding-left: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a></li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
答案 2 :(得分:1)
尝试此操作,将inline-block
和vertical-align: middle;
设置为.fa
.menu li .fa{
display: inline-block;
vertical-align: middle;
}
&#13;
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a></li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
&#13;
答案 3 :(得分:0)
试试这个。
对父类使用display: table
,对子类使用display: table-cell
和vertical-align: middle
。我已设置显示内容的高度
<!DOCTYPE html>
<html>
<head>
<title>Demo Project</title>
<style>
ul li {
height: 100px;
background: grey;
display: table;
border: 1px solid white;
width: 200px;
}
ul li a {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<nav class="menu">
<ul class="active">
<li class="current-item">
<a href="#">
<i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a>
</li>
<li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
</body>
</html>
&#13;
答案 4 :(得分:0)
父元素应将position属性设置为relative,然后将内部元素positio n设置为absolute,将属性top,bottom,left,right设置为0
所以在你的情况下:
.current-item {
position: relative
}
.home-text{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}