html - 如何将具有图标的导航居中，以便文本与图标对齐？

Question

我正在尝试按照下图创建导航，其中文本和图标都居中，但文本与图标左对齐。链接需要是其容器的宽度，这也需要响应:

你是怎么做到的？

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

编辑 更改代码以使其响应

如果我是你，我不会将链接图标作为背景图像。我会将图标作为图像放置在链接标记内。

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