html - 如何使图片中间和链接在同一行？

Question

好的，我得到了这个代码

#container {
  white-space: nowrap;
}
.linkButton:link,
.linkButton:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 7.5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.linkButton:hover,
.linkButton:active {
  background-color: green;
  color: white;
}

<div id="container">
  <img src="logo.png" />
  <a href='index.jsp' class='linkButton'>Home</a>
</div>

图片和链接不在同一行。看起来图像比链接高一点。

如何让图片的中间和链接的中间在同一行(就是说我想要“H”的中间“-”在图片中间的同一行) ?

您可以在此处查看代码:https://jsfiddle.net/sersc0tf/2/

Answer 1

你可以使用Flexbox

#container {
  display: flex;
  align-items: center;
}

.linkButton {
  background-color: white;
  border: 2px solid green;
  padding: 7.5px 15px;
  text-align: center;
  text-decoration: none;
}

<div id="container">
  <img src="http://placehold.it/150x100">
  <a href='index.jsp' class='linkButton'>Home</a>
</div>

---

更新:在这种情况下，只有 img 上的 vertical-align: middle 可以工作

.linkButton {
  background-color: white;
  border: 2px solid green;
  padding: 7.5px 15px;
  text-align: center;
  text-decoration: none;
}
img {
  vertical-align: middle;
}

<div id="container">
  <img src="http://placehold.it/150x100">
  <a href='index.jsp' class='linkButton'>Home</a>
</div>