html - 垂直对齐图像对象旁边的链接

Question

这里有点麻烦。

我试图让文本位于图像的中间。我尝试垂直对齐，但没有用？

例如:

li {
  display: inline;
  width: 30px;
  vertical-align: middle;
}

a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}

<div class="row">
  <ul class="menu">
    <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
    <li><a href="#">but1</a></li>
    <li><a href="#">but2</a></li>
    <li><a href="#">but3</a></li>
    <li><a href="#">but4</a></li>
  </ul>
</div>

JSFiddle:

https://jsfiddle.net/n40qdv8n/

Answer 1

有几件事需要解决:

• 标记无效 <object>不能直属<ul> ，请把它包装成一个<li>标签。

• 你应该使用 display: inline-block而不是 inline , 所以 width可以工作，我建议使用 min-width在这种情况下。

li {
  display: inline-block;
  min-width: 30px;
  vertical-align: middle;
  outline: 1px solid aqua;
}

a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}

<div class="row">
  <ul class="menu">
    <li>
      <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
    </li>
    <li><a href="#">but1</a></li>
    <li><a href="#">but2</a></li>
    <li><a href="#">but3</a></li>
    <li><a href="#">but4</a></li>
  </ul>
</div>