为什么H1标签不与div的顶部对齐？

Question

我试图让H1与其他div垂直对齐。

这是代码。

＆＃13;

＆＃13;

header {
  padding: 0;
  background-color: #000032; 
}
  header div {
    display: inline-block;
    text-align: center;
    padding: 0; 
  }
  header ul {
    list-style-type: none;
    margin: 0;
    padding: 0; 
  }
  header #social {
    float: left; 
  }
  header li img {
    height: 30px;
    margin: 15px;
    margin-right: 0; 
  }
  header img {
    display: block; 
  }
  header h1 {
    font-size: 45px;
    margin: 0;
    display: block; 
  }
  header h1 a {
    color: #FFF;
    text-decoration: none; 
  }
  header #menu {
    float: right; 
  }

main {
  height: 100vh; 
}

＆＃13;

<header class="row--no-gutter">
    <div class="col--1-of-3">
      <ul>
        <li id="social"><a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a></li>
        <li id="social"><a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a></li>
        <li id="social"></li>
        <li id="social"></li>
      </ul>
    </div><div class="col--1-of-3">
      <h1><a href="#">Lorem.</a></h1>
    </div><div class="col--1-of-3">
      <ul>
        <li id="menu">Om</li>
        <li id="menu">lorem1</li>
        <li id="menu">ipsun</li>
      </ul>
    </div>
  </header>

＆＃13;

＆＃13;

＆＃13;

但正如你在图片中看到的那样，H1与顶部不对齐。为什么会这样做，我该如何解决？

Answer 1

问题是h1的父元素div：

header div {
    display: inline-block;
}

因为它的行为类似于内联块这样的事情，所以将其更改为block以避免此问题：

header {
  padding: 0;
  background-color: #000032; 
}
  header div {
    display: block;
    text-align: center;
    padding: 0; 
  }
  header ul {
    list-style-type: none;
    margin: 0;
    padding: 0; 
  }
  header #social {
    float: left; 
  }
  header li img {
    height: 30px;
    margin: 15px;
    margin-right: 0; 
  }
  header img {
    display: block; 
  }
  header h1 {
    font-size: 45px;
    margin: 0;
    display: block; 
  }
  header h1 a {
    color: #FFF;
    text-decoration: none; 
  }
  header #menu {
    float: right; 
  }

main {
  height: 100vh; 
}

.col--1-of-3 {

    float: left;
    }

<header class="row--no-gutter">
    <div class="col--1-of-3">
      <ul>
        <li id="social"><a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a></li>
        <li id="social"><a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a></li>
        <li id="social"></li>
        <li id="social"></li>
      </ul>
    </div><div class="col--1-of-3">
      <h1><a href="#">Lorem.</a></h1>
    </div><div class="col--1-of-3">
      <ul>
        <li id="menu">Om</li>
        <li id="menu">lorem1</li>
        <li id="menu">ipsun</li>
      </ul>
    </div>
    <div style="clear:left;"></div>
  </header>

此外，您必须使用float: left才能保持布局的结构

Answer 2

您的header div规则集display: inline-block;和内联元素的默认垂直对齐方为baseline。请尝试将其更改为top。

另请注意，您的ID必须是唯一的。

header {
  padding: 0;
  background-color: #000032;
}

header div {
  display: inline-block;
  text-align: center;
  padding: 0;
  vertical-align:top;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header #social {
  float: left;
}

header li img {
  height: 30px;
  margin: 15px;
  margin-right: 0;
}

header img {
  display: block;
}

header h1 {
  font-size: 45px;
  margin: 0;
  display: block;
}

header h1 a {
  color: #FFF;
  text-decoration: none;
}

header #menu {
  float: right;
}

main {
  height: 100vh;
}

<header class="row--no-gutter">
  <div class="col--1-of-3">
    <ul>
      <li id="social">
        <a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a>
      </li>
      <li id="social">
        <a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a>
      </li>
      <li id="social"></li>
      <li id="social"></li>
    </ul>
  </div>
  <div class="col--1-of-3">
    <h1><a href="#">Lorem.</a></h1>
  </div>
  <div class="col--1-of-3">
    <ul>
      <li id="menu">Om</li>
      <li id="menu">lorem1</li>
      <li id="menu">ipsun</li>
    </ul>
  </div>
</header>

Answer 3

使header h1成为inline-block;并为其分配vertical-align: middle;，并将vertical-align: middle;分配给包含ul社交图标的DIV：

＆＃13;

＆＃13;

header {
  padding: 0;
  background-color: #000032;
}

header div {
  display: inline-block;
  text-align: center;
  padding: 0;
  vertical-align: middle;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header #social {
  float: left;
}

header li img {
  height: 30px;
  margin: 15px;
  margin-right: 0;
}

header img {
  display: block;
}

header h1 {
  font-size: 45px;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

header h1 a {
  color: #FFF;
  text-decoration: none;
}

header #menu {
  float: right;
}

main {
  height: 100vh;
}

＆＃13;

<header class="row--no-gutter">
  <div class="col--1-of-3">
    <ul>
      <li id="social">
        <a href="#"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></a>
      </li>
      <li id="social">
        <a href="#"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></a>
      </li>
      <li id="social"></li>
      <li id="social"></li>
    </ul>
  </div>
  <div class="col--1-of-3">
    <h1><a href="#">Lorem.</a></h1>
  </div>
  <div class="col--1-of-3">
    <ul>
      <li id="menu">Om</li>
      <li id="menu">lorem1</li>
      <li id="menu">ipsun</li>
    </ul>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;