如何将图像与菜单中的文本放置在同一行上

问题描述 投票：0回答：1

嗨，我想将小图像放置在与文字完全相同的位置上

所以我能够实现它，但是图像有点向上，并且需要b向左移动一点。

您能帮忙吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
  width: 200px;
  border-radius: 10px;
  border: 6px solid #4CAF50;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h1>Vertical Menu</h1>

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#"><img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

</body>
</html>
html css
1个回答
0
投票

使用此。

img {
 position: relative;
  top: 3px;
}


.vertical-menu {
  width: 200px;
  border-radius: 10px;
  border: 6px solid #4CAF50;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
}

img {
 position: relative;
  top: 3px;
}
<h1>Vertical Menu</h1>

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#"><img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.