时间戳

首页 > 解决方案 > 为什么 img 没有与 div 的基线对齐？

html - 为什么 img 没有与 div 的基线对齐？

问题描述

我正在尝试使用单个 div 来制作带有图像和 ul 的导航栏。有一个条件是我不能使用 flexbox 或 grid display。我试图从我学到的基础知识到现在。我遇到的问题：

  1. 图像与顶部对齐。为什么它不在其 div 的基础上？
  2. 在不制作两个 div 的情况下，我可以在单个 div 的中心垂直对齐 ul 和图像吗？

我知道会有更好的方法来做到这一点，但我想对实际发生的事情有一个基本的了解。

这是HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="header">
      <div class="left">
        <img
          src="https://www.qousqazah.com/blog/wp-content/uploads/2018/01/features-of-a-business-logo.png"
          alt=""
          id="logo"
        />
      
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">BLOG</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </div>
      <div class="right">This is right</div>
    </header>
  </body>
</html>

这是CSS代码：

* {
    font-family: 'Montserrat', sans-serif;
}

.left {
    display: inline-block;
    border: 2px solid red;
    position: absolute;
    left: 10px;
}

.left img {
    display: inline-block;
    vertical-align: baseline;
    border:2px solid pink;
    width: 200px;
}

.left ul {
    border:2px solid blue;
    display: inline-block;
    text-align: center;
}

.left ul li {
    display: inline;
    text-decoration: none;
    margin: 2px;
    font-weight: bold;
}

.left ul li a{
    white-space: nowrap;
    text-decoration: none;
    color:black;
}

.right {
    position: absolute;
    display: inline-block;
    border: 2px solid green;
    top: 8px;
    right: 10px;
}

这是JSFiddle

标签： htmlcss

解决方案

改变

.left img {
    display: inline-block;
    vertical-align: bottom;  << instead of baseline
    border:2px solid pink;
    width: 200px;
}

.left ul {
    border:2px solid blue;
    display: inline-block;
    text-align: center;
    margin: 0;               << added
}

它有效：小提琴

请注意，inline-block也会显示空格。所以

<img
  src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
  alt=""
  id="logo"
/>
          <<< this will create unwanted whitespace between the elements
<ul>
  <li><a href="#">HOME</a></li>

推荐阅读