Strange text wrapping in li

Question

I get a weird wrapping of text inside a list item (li).

Check this out: http://demo.hno-eghlimi.de/#footer

I placed the failure with the icon (position: absolute -> This is the cause for wrap) to the main contents of li. I have no idea why the text inside li is wrapped. Do you have a solution?

Answer 1

You need to change two things:

• Apply line-height: 30px;to the item <li>. This is because your image is 30 pixels high.
• Apply vertical-align: bottom;to your <span>with image. This is for vertically aligning the image with text.

, , / <li>.

:

1:

.footer .footer-contact-list li {
  position: relative;
  line-height: 30px; /* add this */
  /* here you may also add some bottom margin/padding */
}

2:

.footer .footer-contact-list li span {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #a32020;
  display: inline-block;
  margin: 0 5px 0 0;
  position: relative;
  vertical-align: bottom; /* add this */
}

Answer 2

CSS span

.footer .footer-contact-list li span {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #a32020;
  display: inline-block;
  margin: 0 5px 0 0;
  position: relative;
  vertical-align: middle;
  margin: 5px;
}