將一個img左對齊到div標籤中？

編輯：這可能會更有意義，請檢查此圖像。 http://puu.sh/rt8M 圖像只是通過填充。我希望標題div垂直擴展以適應圖像。在保持文本居中的同時，圖像的中心應與文本所在的線相交。將一個img左對齊到div標籤中？

我要對齊一個img向左（然後另一個文本向右後）。我嘗試了各種不同的屬性，但似乎沒有一個正確。誰能幫忙？

爲了澄清，我想讓圖像靠在屏幕或瀏覽器窗口的左側。該div從屏幕的左側延伸到右側，就像您期望的標題/標題div一樣。

浮動;左似乎使img從div標籤中刪除。我應該提到有一個文本對齊：中心;屬性在標籤上。但它不能解決問題時刪除，所以我不知道這是什麼。

的HTML

<div id="header"> 
    <div id="title"> 
    <h1> 
    <img class="logo" src="images/logo.png" alt="" width="86" height="98" /> 
    <a href="index.html">Page Header Title</a> 
    </h1> 
    </div> 
</div>

來源

2012-04-25 user1357063

圖像應該放在左邊，但文字應該放在哪裏？在右邊？ – 2012-04-25 19:32:00

可能是我誤解了你的問題，但我想你想在瀏覽器的大多數左側你的標誌是這樣的，那麼你需要設置-ve值的左邊距，如下所示：http：//jsfiddle.net/BvCGh/ – 2012-04-25 19:52:05

使用此

<div id="header" style="float:left"> 
<div id="title"> 
<h1> 
<img class="logo" src="images/logo.png" width="86" height="98" /> 
<a href="index.html">Page Header Title</a> 
</h1> 
</div>

來源

2012-04-25 19:35:28 Enve

我爲您創建一個小dabblet代碼示例。我認爲這就是你想要做的？ http://dabblet.com/gist/2492793

來源

2012-04-25 19:48:00

CSS：

.logo{ 
    float:left; 
    width: 86px; 
    height:98px; 
    display:block;  
} 

.img2{ 
    float:right; 
    display:block; 
} 

.clear{ 
    clear:both; 
}

HTML：

<div id="header"> 
    <div id="title"> 
     <h1> 
      <img class="logo" src="images/logo.png" alt="" /> 
      <a href="index.html">Page Header Title</a> 
      <img class="img2" src="images/img2.png" alt="" /> 
      <div class="clear"></div> 
     </h1> 
    </div> 
</div>

的標誌是輟學的div的原因是因爲它不會被清零。這應該解決問題。

來源

2012-04-25 19:54:30 tedski

將一個img左對齊到div標籤中？

回答

相關問題