将SPAN与UL垂直对齐

Question

我有以下HTML（ 示例 ）：

<span>Sign in with</span>
<ul>
  <li><a href="#"><i class="icon-facebook"></i></a></li>
  <li><a href="#"><i class="icon-twitter"></i></a></li>
</ul>

和CSS：

span {
  display: inline-block;
  font-weight: bold;
  margin-right: 6px;
}

ul {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 4px;
}

ul li {
  font-size: 2.0rem;
}

我希望SPAN与UL中的图标垂直对齐。 但是，即使将间距应用于跨度，我也无法做到。

关于如何解决这个问题的任何想法？

Answer 1

在您的<i>元素vertical-align:middle添加vertical-align:middle ：

 span { display: inline-block; font-weight: bold; margin-right: 6px; } ul { display: inline-block; list-style: none; list-style-type: none; margin: 0; padding: 0; } ul li { display: inline-block; list-style: none; list-style-type: none; margin: 0; padding: 4px; } ul li { font-size: 2.0rem; } i[class^="icon-"] { vertical-align: middle; } 

 <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" /> <span>Sign in with</span> <ul> <li><a href="#"><i class="icon-facebook"></i></a> </li> <li><a href="#"><i class="icon-twitter"></i></a> </li> </ul> 

Answer 2

你可以试试这个

HTML：

 <p>Sign in with</p>
    <ul>           
         <li><a href="#"><i class="icon-facebook"></i></a></li>
         <li><a href="#"><i class="icon-twitter"></i></a></li>
     </ul>

Answer 3

尝试这个，

span {
  display: inline-block;
  font-weight: bold;
  margin-right: 6px;
  vertical-align:middle; /* added */
}

ul {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  vertical-align:middle;  /* added */
}

ul li {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 4px;
}

ul li {
  font-size: 2.0rem;
}