带图像的垂直菜单：对齐项目的第一个字符

Question

我有一个垂直菜单。我想垂直对齐项目的名称。我有这个：

li {
  list-style: none;
}
ul {
  padding: 0;
}
img {
  vertical-align: middle;
}

<ul>
  <li>
    <a href="#">
      <img src="http://sermovi.es/images/car95.svg" />
      <span>Cars</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://sermovi.es/images/restaurant95.svg" />
      <span>Restaurants</span>
    </a>
  </li>
</ul>

结果如下：

但我想要这个：

http://jsfiddle.net/o404phzt/

Answer 1

您可以将图片放入固定宽度div：

li {
  list-style: none;
}
ul {
  padding: 0;
}
.menu-item {
  display: inline-block;
  width: 100px;
  text-align: center;
}
img {
  vertical-align: middle;
}

<ul>
  <li>
    <a href="#">
      <div class="menu-item">
        <img src="http://sermovi.es/images/car95.svg" />
      </div>
      <span>Cars</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="menu-item">
        <img src="http://sermovi.es/images/restaurant95.svg" />
      </div>
      <span>Restaurants</span>
    </a>
  </li>
</ul>

Answer 2

可能最简单的方法是创建一个2x2表而不使用列表。

<table>
  <tr>
    <td>
      <img src="http://sermovi.es/images/car95.svg" />
    </td>
    <td>
      <span>Cars</span>
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://sermovi.es/images/restaurant95.svg" />
    </td>
    <td>
      <span>Restaurants</span>
    </td>
  </tr>
</table>

您仍然可以根据需要在td标记内使用类。 （例如对齐）。

Answer 3

您可以尝试CSS表格：

＆＃13;

＆＃13;

ul {
  padding: 0;
  display: table;
}
ul > li {
  display: table-row;
}
ul > li > * {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<ul>
  <li>
    <img src="http://sermovi.es/images/car95.svg" />
    <span>Cars</span>
  </li>
  <li>
    <img src="http://sermovi.es/images/restaurant95.svg" />
    <span>Restaurants</span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意我删除了链接，因为它们会干扰布局。

但是，由于您使用<a href="#">，您可能正在使用JS处理它们。然后，您可以删除它们，使用JS执行相同的单击处理，并使用CSS伪造链接：

＆＃13;

＆＃13;

ul {
  padding: 0;
  display: table;
}
ul > li {
  display: table-row;
  color: blue;
  cursor: pointer;
}
ul > li:hover {
  text-decoration: underline;
}
ul > li > * {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<ul>
  <li>
    <img src="http://sermovi.es/images/car95.svg" />
    <span>Cars</span>
  </li>
  <li>
    <img src="http://sermovi.es/images/restaurant95.svg" />
    <span>Restaurants</span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在span inline-block内构建图像和div将灵活解决这个问题：

li {
  list-style: none;
}
ul {
  padding: 0;
}
img {
  vertical-align: middle;
}
li {
  width: 300px;
}
li div {
  display: inline-block;
}
.image {
  width: 50%;
  text-align: center;
}
.text {
  width: 50%;
}

<ul>
  <li>
    <a href="#">
      <div class="image">
        <img src="http://sermovi.es/images/car95.svg" />
      </div>
      <div class="link">
        <span>Cars</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="image">
        <img src="http://sermovi.es/images/restaurant95.svg" />
      </div>
      <div class="link">
        <span>Restaurants</span>
      </div>
    </a>
  </li>
</ul>

Fiddle