無法弄清楚如何對齊HTML/CSS Div

Question

我想在我的網頁的主div元素內水平對齊一個圖像和一段文字。

的div包裹這樣的：

<div id="main"> 
    <div id="image"> 
    </div> 
    <div id="paragraph"> 
    </div> 
</div> 

這是正確的佈局？如果是這樣，我需要什麼CSS？

Answer 1

必須同時內部的div設置爲

display: inline-block;

看看這個小提琴。 https://jsfiddle.net/m8athtLp/light/

Answer 2

你可以使用兩種方法： 首先，從您的標記，您可以使用CSS來float: left圖像和float: right段落。 其次，

<pre><div id="main"> 
    <img src="images/img.jpg" alt=""> 
    <p>your text</p> 
</div></pre> 

對於這個這個代碼，你可以使用float: left圖像，段落文本自動右對齊

感謝