Question

在这里遇到一点麻烦。

我试图将文本放在图像的中间。我尝试垂直对齐，但它不起作用？

例如：

＆＃13;

li {
  display: inline;
  width: 30px;
  vertical-align: middle;
}

a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}

＆＃13;

<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>

＆＃13;

的jsfiddle：

https://jsfiddle.net/n40qdv8n/

Answer 1

有几件事需要解决：

标记无效<object>无法直接在<ul>下，请将其打包到<li>代码中。
您应该使用display: inline-block而不是inline，因此width可以正常运行，我建议在这种情况下使用min-width。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

为猫皮肤设计的方法很多，但您可以在父UL上使用flexbox并使用“align-items：center;”获得你想要的效果。

https://jsfiddle.net/radiantstatic/3ajjsdLc/

ul{
  display: flex;
  align-items: center;
}
li{
   display: inline;
   width: 30px;
   vertical-align: middle;
   }
a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
  
}

a:hover {
  color: red;
}

<body>
  <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>
    </div>
</body>

在此处查看有关flexbox的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 3

使用图像上的垂直对齐而不是文本https://jsfiddle.net/qb1xjt3u/

HTML：

<body>
  <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>
    </div>
</body>

CSS

li{
   display: inline;
   width: 30px;
   }
a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;

}

a:hover {
  color: red;
}

object { vertical-align: middle; }

Answer 4

让li和object都有display: inline-block;和vertical-align：middle;：

li {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
object {
  display: inline-block;
  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>

Answer 5

你的标记错了。我们需要将li放在直接ul中，但是你使用了对象，所以我已经改变了一点

＆＃13;

li{
   display: inline-block;
   vertical-align: middle;
   }
   object {
     margin: 0;
     padding: 0;
   }
a {
  color: #333;
  text-align: center;
  
}

a:hover {
  color: red;
}

＆＃13;

<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>

＆＃13;

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

5 个答案: