Html 将h2置于div的中心，将img置于文本的右侧

我试图把2个“h1”标签放在页面的中心，在“h1”标签的右边放一个徽标。我很沮丧，因为如果不使用绝对定位，我无法解决它。我不想使用绝对定位，因为如果浏览器的分辨率改变，它看起来会完全不同。以下是我正在尝试做的事情：

通过使用“text align:center；”，我可以将Mars posal文件放到div的中心。但如果不使用绝对定位，我无法获得它旁边的img。下面是我现在使用的代码：

HTML:

        <div id="logo">             
            <h1>Mars Postal</h1>
        </div>
        <img src="images/img.jpg" alt="img from mars" title="mars"/>

}

}

---

我曾尝试将img放在2“h1”div之间，但没有成功。我试着用float：对img来说是正确的，然后它下降到导航栏。所以我希望有人能给我点启示。谢谢

根据您的代码，您可以按照以下方式执行操作：

---

从代码中，可以执行以下操作：

从标题中包含徽标的代码中，您可以将其设置为：

如果

h1

为300px宽且居中，要在300px框旁边看到徽标（

h1

）：

---

h1是块级标记，因此它占据容器的整个宽度。将图像移回#logodiv。根据您希望图像的行为方式：

#logo{
    width: 300px;
    margin: 0 auto; 
    background-color:#FFFFFF; 
    text-align:center;
}
#logo img{
    float: right;
}
#logo h1{
     display: inline;
    font-size: 30px;
    font-family: 'Playfair Display', serif; 
}

或者

---

将图像设置为标题标记的背景图像，并将其放置在右侧，不要重复。

您可以尝试以下操作：
HTML

<h1><img src="images/img.jpg">Mars<br>Postal</h1>

观看现场演示

img {
    right: 0;
    position: absolute;
    margin-top: -200px;
}

#logo {
  text-align:center;
}
h1 {
  display:inline-block;
  vertical-align:middle;
  width:300px;
}
#logo img {
  margin-right:-200px;
  vertical-align:middle;
}

<div id="logo">             
            <h1>            
            <img src="images/img.jpg" alt="img from mars" title="mars"/>            
            Mars Postal          
            </h1> 
        </div>

#logo {             
      text-align:center;             
      }             
#logo h1 img  {            
      float:right;            
      }
#logo h1 {             
      margin:0;           
      /*optionnal*/             
      line-height:/* height of logo img */            
      }   

#logo {             
          text-align:center;             
          }             
    #logo h1 img  {            
          float:right;
margin-right:-200px ; /* if image is 200px width , else adapt negative margin to width*/            
          }
    #logo h1 {             
          width:300px;             
          margin:0 auto;           
          /*optionnal*/             
          line-height:/* height of logo img */            
          }           

#logo{
    width: 300px;
    margin: 0 auto; 
    background-color:#FFFFFF; 
    text-align:center;
}
#logo img{
    float: right;
}
#logo h1{
     display: inline;
    font-size: 30px;
    font-family: 'Playfair Display', serif; 
}

#logo{
    width: 300px;
    margin: 0 auto; 
    background-color:#FFFFFF; 
    text-align:center;
}
#logo img{
    display:inline;
}
#logo h1{
     display: inline;
    font-size: 30px;
    font-family: 'Playfair Display', serif; 
}

<h1><img src="images/img.jpg">Mars<br>Postal</h1>

h1 {
    text-align: center;  
    position: relative; //the elelement with abslolute position will be positioned relative to this element
}

img {  
    position: absolute; //this element will be positioned relative to it's parent with relative position
    right: 0;
}