时间戳

首页 > 解决方案 > 我无法将 HTML 图像与文本对齐

javascript - 我无法将 HTML 图像与文本对齐

问题描述

我是网络编程的新手，我在 HTML 图像对齐方面遇到了一个烦人的问题......我不明白为什么图像总是与位于同一行的文本相比总是向下移动，不管它的 CSS 设置如何！

<li class="navbar-item"><a class="nav-link" href="../contact/contact.php" >CONTACT</a></li>
<li class="navbar-item"><a class="nav-link" href="#"><img src="source" style="border-radius:10px;width:35px;height:35px;"></a></li>

这是我正在运行的基本代码，我已经尝试了很多方法来将“CONTACT”与图像对齐，但没有一个可以工作，给了我相同的结果：

结果

标签： javascripthtmlcss

解决方案

您可以使用 flexbox 非常轻松地对齐项目。您需要垂直对齐它们的规则是“align-items：center;”。

ul {
  display: flex;
  align-items: center;
}

li {
list-style: none;
margin: 0 .5rem;
}

img {
  max-width: 100px;
}
<ul>
  <li class="navbar-item">
    <a class="nav-link" href="#">CONTACT</a>
  </li>
  <li class="navbar-item">
    <a class="nav-link" href="#">
    <img src="https://iconarchive.com/download/i47330/icons-land/vista-flags/United-States-Flag-1.ico">
    </a>
  </li>
</ul>

推荐阅读