2012-04-08 136 views
0

我基本上試圖創建一個液體<h1>和另一個div將跨越整個高度<h1>,但我希望垂直對齊居中。我基本上試圖把一個圖像放在頁面標題的左側:CSS垂直對齊的圖像/文字

<div class="outer"> 
    <div><img src="pound.png" /></div> 
    <h1>This is text that is really long. This is text that is really long. This is text that is really long. This is text that is really long. This is text that is really long.</h1> 
</div> 

這裏是一個例子;我真的不想使用表格,因爲我希望能夠在某些情況下將圖像浮動到右側。我也不在乎邊界,我只是在做它來說明這種對齊。

------------------------------------------------------ 
     | This is text that is really long. This is 
###### | text that is really long. This is text that 
###### | is really long. This is text that is really 
###### | long. This is text that is really long. This 
     | is text that is really long. 
------------------------------------------------------ 

我的主要問題是如何將圖像垂直佔據了整個空間,這樣我可以用保證金垂直對齊:50%以上的汽車或一些變化。我可以讓圖像垂直居中,但是文字環繞它,或者我可以讓文字不包裹,但是圖像垂直對齊。

回答

0

瀏覽器支持目前有點受限,但您可以嘗試使用box-align css屬性來垂直對齊圖片和文本。更多here

-1

嘗試使用行高。此外,如果可能的話,會更容易使用DIFFS

+0

我該怎麼做2 div? – Mark 2012-04-09 01:16:08

+0

將兩個div放入容器中。一個與圖像另一個文本: – Ray 2012-04-09 03:27:21