如何在網頁上對齊和浮動元素

項目在網頁上的放置對整體設計至關重要。 儘管還有其他方法可以影響佈局，比如使用表格（ 我們不推薦 ），但最好的方法是使用CSS 。

下面，我們將看看如何使用簡單的CSS樣式內聯屬性來對齊圖像，表格，段落等。

注意：這些相同的方法也可以在外部樣式表上使用，但由於這些方法適用於單個項目並且可能需要保持這種方式，所以最好使用如下所述的內聯樣式。

對齊文本段落

段落標記是開始佈置網頁的第一個地方。 它的打開和關閉標籤如下所示：

段落中文本的默認對齊方式位於頁面的左側，但您也可以將段落對齊到右側和中間。

使用float屬性可以將段落對齊到父元素的右側或左側。 該父元素內的任何其他元素將圍繞浮動元素流動。

要使段落達到最佳效果，最好在段落的寬度設置為小於容器（父級）元素的寬度。

將段落內的文本對齊

可以說，段落文本中最有趣的對齊方式是“證明”，它告訴瀏覽器顯示對齊的文本，實質上是對著窗口的右側和左側。

為了驗證段落中的文本，您可以使用text-align屬性。

您還可以使用text-align屬性將段落內的所有文本對齊到右側或左側（默認設置）。

文本對齊屬性將對齊元素內的文本。 從技術上講，它不應該對齊段落或其他元素中包含的圖像，但大多數瀏覽器將圖像視為內聯屬性。

對齊圖像

在圖片標籤上使用浮動屬性，您可以定義圖片在頁面上的位置以及文本如何環繞它們。

就像上面的段落一樣，圖片標籤中的浮動樣式屬性會將您的圖片放置在頁面上，並告訴瀏覽器如何在圖片周圍流動文本和其他元素。

當圖像顯示在屏幕的左側時，跟在上面圖像標籤上的文字將在圖像周圍流動。

如果我想讓文本停止環繞圖像，我使用clear屬性：

調整多於段落

但是，如果您想要對齊的不僅僅是段落或圖像呢？ 您可以簡單地在每個段落中放置一個樣式屬性，但是您可以使用一個更有效的標籤：