将 h2 放在 div 的中心，将 img 放在文本的右侧答案

【问题标题】：Make h2 in the center of a div and an img on the right of the text将 h2 放在 div 的中心，将 img 放在文本的右侧
【发布时间】：2014-03-29 02:57:18
【问题描述】：

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

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

HTML：

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

CSS

#logo{
width: 300px;
margin: 0 auto; 
background-color:#FFFFFF;

}

#logo h1{
font-size: 90px;
text-align: center;
font-family: 'Playfair Display', serif;

}

我尝试将 img 放在 2 个“h1”div 之间，但没有成功。我尝试使用float：正确的img，它下降到导航栏。所以我希望有人能给我一些启示。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

根据您的代码，您可以执行以下操作：JS Fiddle

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

【讨论】：

【解决方案2】：

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; 
}

或者……

#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; 
}

【讨论】：

【解决方案3】：

从您的代码中，您可以这样做： http://codepen.io/gc-nomade/pen/DKnqJ/

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

和 CSS

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

如果h1 的宽度为 300 像素并居中，要查看 300 像素 框旁边的徽标 (h1)：

#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 */            
          }

【讨论】：

【解决方案4】：

将图片设为header标签的背景图片，并将其放置在右侧，不重复。

【讨论】：

【解决方案5】：

你可以试试这样的：
HTML

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

css

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;
}

观看现场演示here

【讨论】：