如何将一段文本与一堆可点击的精灵图像对齐在同一行中？

Question

文字应该像我想要的那样对齐

现在这就是我得到的：

下面是我的html和css3代码。我正在使用Twitter bootstrap3。

ul.connect{display:inline-block;list-style-type:none;margin:0px;padding:0px;}
ul.connect li{display:inline-block; padding-right:2px;}
ul.connect li a{display:inlineblock;background:url("cfo/images/sprite1.png") no-repeat;width:25px; height:25px;}
.test {font-size:10px;color:#333;}

<ul class="connect">											
		<li class="fb"><span class="test">CONNECT WITH US</span><a href="#"></a></li>
		<li class="twtr"><a href="#"></a></li>
		<li class="gogpls"><a href="#"></a></li>
		<li class="lnkin"><a href="#"></a></li>
		<li class="wifi"><a href="#"></a></li>
</ul>

Answer 1

为了便于垂直对齐项目，我使用了display flex属性。有关更多详细信息，请阅读https://css-tricks.com/centering-css-complete-guide/

中居中的CSS完整指南

ul.connect {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}

ul.connect li {
  padding-right: 2px;
}

ul.connect li a {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: red url("cfo/images/sprite1.png") no-repeat;
}

ul.connect li.fb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

ul.connect .test {
  font-size: 10px;
  color: #333;
  padding-right: 2px;
}

<ul class="connect">
  <li class="fb"><span class="test">CONNECT WITH US</span>
    <a href="#"></a>
  </li>
  <li class="twtr">
    <a href="#"></a>
  </li>
  <li class="gogpls">
    <a href="#"></a>
  </li>
  <li class="lnkin">
    <a href="#"></a>
  </li>
  <li class="wifi">
    <a href="#"></a>
  </li>
</ul>

Answer 2

尝试将文本行的高度设置为与图标相同的高度。

.test {
  line-height: 25px;
}

应该解决您的问题