使h2位於div的中央，img位於文本的右側

我試圖在頁面的中心放置2個「h1」標記，並在「h1」標記的右側放置一個徽標。我很沮喪，因爲如果不使用絕對定位，我無法解決它。我不想使用絕對定位，因爲如果瀏覽器的分辨率發生變化，它看起來會完全不同。以下是我想要做的： enter image description here 使h2位於div的中央，img位於文本的右側

我能夠通過使用「文本對齊：中心;」獲得火星郵政的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;

}

我試圖把2「h1」div之間的img，但沒有奏效。我嘗試着使用float：right作爲img，並且它下到了導航欄。所以我希望有人能爲我揭開一些光。謝謝

來源

2014-03-28 Hold_My_Anger

基於您的代碼，你可以做線沿線的東西：JS Fiddle

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

來源

2014-03-28 18:19:38

從您的代碼，你可以這樣做： 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 */    
      }

來源

2014-03-28 18:22:22

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

來源

2014-03-28 18:26:32 tsg

使圖像頭標記，並將其位置與無重複正確的背景圖像。

來源

2014-03-28 18:41:17 Eeji

小提琴：http://jsfiddle.net/ ALk7D / – Eeji

你可以嘗試這樣的事情：
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

來源

2014-03-28 18:57:18 Mojtaba

使h2位於div的中央，img位於文本的右側

回答

相關問題