Как поместить фрагмент текста в одну строку с кучей кликабельных спрайтовых изображений?

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

попробуйте установить высоту строки текста на ту же высоту, что и ваши значки.

.test {
  line-height: 25px;
}

должен решить ваши проблемы

Answer 2

Для удобства выравнивания по вертикали элементов я использовал свойство display flex .Для более подробного руководства прочитайте полное руководство по центрированию css в https://css -tricks.com / centering-css-complete-guide /

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>