html - 将 SPAN 与 UL 垂直对齐

Question

我有以下 HTML ( Example ):

<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

添加vertical-align:middle给你的<i>元素:

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>