html - 带有标题元素的内联 Logo

Question

HTML代码:

<div class="header">

   <img src=".jpg" width="240" height="180" >

    <h1>MY APPS</h1>
    <p>TRY AND ERROR, CODING IS FUN</p>  
</div>

CSS:

.header{
  background-color: rgb(255,255,255,0.7);
  }

 .header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}


 .header h1 {
  position: relative;
  top: 18px;
  left: 50%;
  padding: 12.5px
 }

 .header p {
  position: relative;
  top: -25px;
  left: 50%;
  padding: 12.5px
 }

我怎样才能把<img>与我的 <h1> 内联？

Answer 1

您可以使用 flexbox 轻松做到这一点:

header {
  display: flex;
  align-items: center;
  justify-content: center;
 }

header img {
  width: 100px;
  height: 100px;
  background: #555;
  margin-right: 20px;
}

<header>
  <img>
  <div>
    <h1>MY APPS</h1>
    <p>TRY AND ERROR, CODING IS FUN</p>
  </div>
</header>

您可以阅读更多关于 flexbox 的信息这里:https://internetingishard.com/html-and-css/flexbox/

此外，您可以替换 <div class="header">用<header>元素使您的 HTML 更具语义。我已经在示例中这样做了。