Question

我想把2＆＃34; h1＆＃34;页面中心的标签和＆＃34; h1＆＃34;标签右侧的徽标。我很沮丧因为没有使用绝对定位我无法解决它。我不想使用绝对定位，因为如果浏览器的分辨率发生变化，它看起来会完全不同。以下是我要做的事： enter image description here

我可以使用＆＃34; text-align：center;＆＃34;将Mars邮件发送到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＆＃34; h1＆＃34; div，但那不起作用。我尝试使用float：右边的img，它下到导航栏。所以我希望有人可以为我解释一下。谢谢

Answer 1

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

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

Answer 2

从您的代码中，您可以这样做： 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像素且居中，则要将徽标放在300px 框旁边（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 */            
          }

Answer 3

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

Answer 4

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

Answer 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

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

5 个答案: