html - 水平对齐图像和段落

Question

我正在尝试将我的图像与网页中的标题和副标题对齐。我希望图像位于左侧，标题及其副标题位于中间。

 <header>
    <div class="title_div">
        <img src="pictures/logo.png" alt="logo"/>
        <p>
           <h1>Title</h1>
           <h2>Subtitle</h2>
        </p>
     </div>
 </header>

我尝试使用 float:left 属性，但图像从标题中消失了......我看到了，因为我使用了以下 css 属性:

header{
    background:#f1f1f1;
    border: black solid;
}

我想达到类似 https://www.ted.com/ 的目的但在“值得传播的想法”下有一个副标题。

Answer 1

为您的 Logo 和文本使用单独的 div 使其更清晰:

<header>
<div class="logo">
  <img src="pictures/logo.png" alt="logo"/>
</div>

<div class="title_div">
 <h1>Title</h1>
 <h2>Subtitle</h2>
</div>
</header>

CSS:

header{
 float:left;
}

.logo{
 float:left;
 margin:20px;
}
.title_div{
 float:left;
}

注意:请注意，您对 HTML 的使用非常不当。 P 标签用于段落，H1 用于标题，因此您不能将标题放在P 标签内。重新构建您的 HTML。