使用CSS移动文本

时间：2017-02-20 11:05:09

标签： html css css3

我知道这可能是偏离主题但我无法在中心对齐测试（垂直对齐）。  这是我的菜单代码：

<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>

5 个答案:

答案 0 :(得分：2)

只需将vertical-align: middle添加到li，就像这样，它会正常工作

.menu li * {
  vertical-align: middle;
}

示例代码段

＆＃13;
＆＃13; 
.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;
＆＃13;
＆＃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

＆＃13;
＆＃13; 
.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;
＆＃13;
＆＃13;

答案 3 :(得分：0)

试试这个。 对父类使用display: table，对子类使用display: table-cell和vertical-align: middle。我已设置显示内容的高度

＆＃13;
＆＃13; 
   <!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;
＆＃13;
＆＃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;
}
相关问题
最新问题