时间戳

首页 > 解决方案 > 带有标题元素的内联徽标

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

问题描述

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>？

标签： htmlcss

解决方案

试试这个代码

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

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

.header-content h1 {
  margin-top: 0px;
}

.header-content p {
  margin-bottom: 0px;
}
<div class="header">

   <img src=".jpg" width="240" height="180" >
   <div class="header-content">
      <h1>MY APPS</h1>
    <p>TRY AND ERROR, CODING IS FUN</p>    
   </div>
</div>

推荐阅读