How to center navigation that has icons so text is aligned to icons?

Question

I am trying to create the navigation as per the picture below, where the text is centered aswell as the icon, but the text is left aligned to the icon. The link needs to be the width of its container, this also needs to be responsive:

How do you go about this?

CODEPEN DEMO HERE

HTML

<ul class="mobile-home-section">
    <li><a href="#">PROPERTY</a></li>
    <li><a href="#">FUTURE PLANNING</a></li>
    <li><a href="#">COMMERICAL</a></li>
</ul>

CSS

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158
}

.mobile-home-section li {
    background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
    padding-left: 50px;
}

.mobile-home-section li a {
    color: white;
    text-decoration: none;
    padding: 20px 0;
    display: block;
    border-bottom: 1px solid white;
}

Answer 1

As others have said, it's going to be easier using an image. The most important thing to know is that not all display: values support vertical alignment - my go-to is display: inline-block, but if you're using flexbox it might be more convenient to use display: flex

Depending on context, I typically use one of these three solutions:

• Adjacent inline blocks
• CSS tables
• A pseudoelement with a background image

Here are examples of each of those.

Notes:

• For the table solution, the <li> loses its bullet and gets an auto width (it's as wide as its contents) - depending on your context, you might want to add on a width: 100% to #or-another li
• For the background image solution, if the image isn't necessarily the same size as the container you'll want to use background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
• In all three cases, we're accounting for the possibility that either of the elements could be the taller one. If you know the image is always going to be taller than the text, you could target #or-another span instead of #or-another li > *, and you could drop #one-more li span {...} entirely

#one-way li > * {
  display: inline-block;
  vertical-align: middle;
}

#or-another li {
  display: table;
}
#or-another li > * {
  display: table-cell;
  vertical-align: middle;
}

#one-more li span {
  display: inline-block;
  vertical-align: middle;
}
#one-more li:before {
  content:'';
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
  background:url('https://placehold.it/200x200');
}

<ul id="one-way">
  <li>
    <img src="https://placehold.it/200x200" alt="" />
    <span>1</span><!-- or div or p or what have you -->
  </li>
</ul>

<ul id="or-another">
  <li>
    <img src="https://placehold.it/200x200" alt="" />
    <span>2</span>
  </li>
</ul>

<ul id="one-more">
  <li>
    <span>3</span>
  </li>
</ul>

Answer 2

EDIT Changed the code to make it responsive

If i was you, I would not place the icon for the link as a background image. I would place the icon as an image inside of the link tag.

HTML

<div class="container">
  <ul class="mobile-home-section">
    <li>
      <a href="#">
        <span><img src="img2.jpg">PROPERTY</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span><img src="img2.jpg">FUTURE PLANNING</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span><img src="img3.jpg">COMMERICAL</span>
      </a>
    </li>
  </ul>
</div>

CSS

.container {
  background: #273F87;
}

ul.mobile-home-section {
  display: block;
  list-style-type: none;
  padding: 0px;
}

ul.mobile-home-section li:nth-child(2) {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

ul.mobile-home-section li a {
  display: block;
  color: #fff;
  padding: 0px;
  font-family: serif;
  margin: 0px auto;
  text-decoration: none;
}   
ul.mobile-home-section li a span img {
  width: 50px;
  height: 50px;
  padding-right:20px;
  display: inline-block;
  vertical-align: middle;
}

ul.mobile-home-section li a span {
  padding: 10px 0px;
  width: 230px;
  display:block;
  margin: auto;
}

Updated JSfiddle

Answer 3

The selectors could use some love, but here is my codepen:

<div class="container">
<ul class="mobile-home-section">
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>PROPERTY</span></span></a>
    </li>
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>FUTURE PLANNING</span></span></a>
    </li>
    <li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>COMMERICAL</span></span></a>
    </li>
</ul>

.container {
    width: 600px;
}

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158
}

.mobile-home-section li {
    margin: 0;
    padding: 0;
}

.mobile-home-section li a {
    display: block;
    height: 3em;  
}

.mobile-home-section li a > span {
    display: block;
    width: 55%;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}

.mobile-home-section li a > span > span {
    line-height: 2em;
    font-size: 1.4em;
    position: relative;
    top: -0.4em;
}

.mobile-home-section li span img {
    margin-right: 0.75em;
    height: 2.6em;
    position: relative;
    top: 0.2em;
}

.mobile-home-section li a {
    border-bottom: 1px solid white;
    color: white;
    display: block;
    font-family: 'Times New Roman';
    font-size: 1.2em;
    padding: 0;
    text-align: center;
    text-decoration: none;
}

http://codepen.io/anon/pen/PZwvZz

Answer 4

Try just editing the paddings and background-position.

.container {
width: 600px;
}

.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}

.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position:50% 15px;
    padding-left: 50px;
}

.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align:left;

}

UPDATE try this

.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align: left;
}

Update the padding of .mobile-home-section li a

Answer 5

Add a text-align: center; in the .mobile-home-section class to make them align to the center and remove the padding-left: 50px; under .mobile-home-section li class. And these two CSS will become:

.mobile-home-section {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    background: #163158;
    text-align: center;
}

.mobile-home-section li {
    background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
    background-repeat: no-repeat;
    background-position: 0 10px;
}

You can see the demo here.