Vertically align SPAN with UL

Question

I have the following 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>

And the 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;
}

I would like the SPAN to be vertically aligned with the Icons in the UL. But I am not able to do it even when applying padding to span.

Any idea on how to solve this?

Possible duplicate of [How to vertically center text with CSS?](http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css) — isherwood, Sep 30 '16 at 17:35

score 4 · Accepted Answer · answered Sep 30 '16 at 17:34

Add vertical-align:middle to your <i> elements:

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>

Saravanan Kasi · Answer 2 · 2016-09-30T17:34:18.127

0

You can try this

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>

edited Sep 30 '16 at 17:34

answered Sep 30 '16 at 17:31

Saravanan Kasi

676
6
21

now check the code. This is one of the way to make the text vertically aligned with the icons. :) – Saravanan Kasi Sep 30 '16 at 17:34

score 0 · Answer 3 · answered Sep 30 '16 at 17:41

try this,

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

Vertically align SPAN with UL

3 Answers3