在 header 中将徽标与 H1 和 H2 对齐时出现问题

Question

I can't figure out why my logo img is leaking into my navigation and not aligning.我无法弄清楚为什么我的徽标 img 会泄漏到我的导航中并且没有对齐。 I need the logo to align with the h1 and h2 in my header.我需要徽标与 header 中的 h1 和 h2 对齐。 It currently looks like this:它目前看起来像这样：

Here is my html:这是我的 html：

<body>
  <div id="headerWrapper">
    <header>
      <img src="images/logopracticedone.png" alt="">
      <h1>Science Museum</h1>
      <h2>A Celebration of Technology & Mechanics</h2>
    </header>
  </div>
  <div id="navWrapper">
    <nav class="clearfix">
      <ul>
        <li class="active"><a href="index.html">Visit Us</a></li>
        <li><a href="#">See and Do</a></li>
        <li><a href="#">Learning</a></li>
        <li><a href="#">Education</a></li>
      </ul>
    </nav>
  </div>

Here is my SCSS:这是我的 SCSS：

body {
    font-family: $fontFamily;
    font-size: 16px;
    font-weight: $regularWeight;
}


header {
    img { max-width: 100%;
    max-height: 100%;
    float: left;}
    
    padding: 1rem $gutter;

    h1 {
        margin: 0; 
        font-size: 1.5rem;
        font-weight: $semiBold;
        
    } //end of h1
    h2{
        margin: 0; 
        font-size: 1.2rem; 
        font-weight: $regularWeight;
    } //end of h2

} //end of header

Answer 1

Remove float from img从img中删除浮动
Adjust the height in css of img to fit according to your design.根据您的设计调整img的 css 中的height以适合您的设计。
Move the headings into a div to cover for removing that float.将标题移动到一个 div 中以覆盖以删除该浮动。
Make display inline-block for both the new div and img为新的div和img制作display inline-block

<img src="images/logopracticedone.png" alt="">
<div>
  <h1>Science Museum</h1>
  <h2>A Celebration of Technology & Mechanics</h2>
<div>

在 header 中将徽标与 H1 和 H2 对齐时出现问题

问题描述

1 个解决方案

解决方案1
0 2020-12-08 03:19:34

在 header 中将徽标与 H1 和 H2 对齐时出现问题

问题描述

1 个解决方案

解决方案1 0 2020-12-08 03:19:34

解决方案1
0 2020-12-08 03:19:34