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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用{ "mode":[ { "route_type":"0", "route":[ { "route_id":"Green-B", "route_name":"Green Line B" }, { "route_id":"Green-C", "route_name":"Green Line C" }, { "route_id":"Green-D", "route_name":"Green Line D" }, { "route_id":"Green-E", "route_name":"Green Line E" }, { "route_id":"Mattapan", "route_name":"Mattapan Trolley" } ], "mode_name":"Subway" },属性。在您的情况下，我认为在两个元素上添加vertical-align应该有效。

如何使图像和链接的中间位于同一行？

2 个答案: