浮動圖像旁邊的標題和對齊段落

我是相當新的編碼，我似乎無法弄清楚這一個出來......我已經包含了一個圖像，我試圖複製只是爲了實踐。我無法弄清楚如何將圖像浮動在標題旁邊，並垂直標題。然後我還需要對齊標題下方的文字。浮動圖像旁邊的標題和對齊段落

這是怎麼了我已經構建了HTML的塊

<article> 

<header> 
<img src="#" alt="#" rel="#" /> 
<h1>This is the header</h1> 
</header> 

<p> 
this is a paragraph full of text that needs to be aligned underneath the title. 
</p> 

<footer> 
<a href="#"> Read more, aligned underneath paragraph</a> 
</footer> 

</article>

然後儘可能的CSS去，我無法弄清楚的一個。我正在嘗試將圖像浮動到左側，然後清除p和頁腳中的浮動，並將左邊距設置爲在標題下對齊。這工作，但後來我不知道如何垂直居中h1與img。

我希望這是有道理的。再次，我是新的，所以我希望我的大部分東西是錯的，但我渴望學習，所以我問！

enter image description here

編輯：我不要求任何人寫的代碼我。相反，我想知道我的浮法和保證金的思想是否正確...除了h1的垂直對齊外，一切都正常工作...

來源

2013-10-09 Benoit Schrijnemakers

歡迎SO。您需要向我們展示您嘗試過的內容，而不是要求我們爲您編寫代碼。如果您是CSS新手，請閱讀並學習基礎知識，然後放手。 – isherwood

您不應該在'

'內使用'

'或'

'和'

訣竅圖像對準和H1是讓他們inline-block然後vertical-align:middle 。沒有需要的神奇數字。

article header img, 
article header h1 { 
    display:inline-block; 
    vertical-align:middle; 
}

Codepen Example

來源

2013-10-09 20:36:36

我心情很好。下面是一個如何解決這個問題的例子。有各種各樣的可能性。這只是其中的一個：

CSS

article { 
    position: relative; 
    float: left; 
    width: 200px; 
    padding: 0 0 0 60px; 
} 

article:before { 
    content: url(http://placehold.it/50x50); 
    position: absolute; 
    top: 0; 
    left: 0px; 
    width: 50px; 
    height: 50px; 
}

演示

Try before buy

來源

2013-10-09 20:30:04 insertusernamehere

浮動圖像旁邊的標題和對齊段落

回答

相關問題