一種用CSS以左對齊/中心對齊/右對齊方式顯示用HTML編寫的句子的方法

在用“從左到右書寫的語言”(如日語和英語)中編寫的HTML中，除非指定了字符移位方向，否則句子左對齊顯示。但是，當您想要將標題和標題(居中)居中并發布它們時，這種情況很常見，有時您希望發布日期和注釋右對齊。

標題居中的示例，日期右對齊，文本以左對齊方式發布

指定發布在網頁上的句子和圖像的文本方向，將它們顯示為左對齊，右對齊或右對齊的方法很簡單。它只是使用CSS的text-align屬性來指定你想要的方向。但是，您可能希望在同一行中同時寫“左對齊句子”和“右對齊句子”，而不是簡單地在左右對齊的一行上顯示句子。例如，它如下所示。

顯示左對齊字符和右對齊字符在同一行中共存的示例

因此，這一次，我們將CSS應用于用HTML編寫的句子，并顯示如何以三種方式顯示特定范圍，左對齊，居中對齊和右對齊，以及將它們混合在同一行中的方法。我會介紹一下。無論如何，它可以通過一個非常簡短的HTML + CSS源來實現。【本文內容】

基本：寫入以使用CSS顯示左/中/右對齊的整行應用示例：顯示左對齊和右對齊共存于同一行的示例應用示例：如何編寫CSS以使左對齊和右對齊在同一行上共存應用示例：當text-align和float一起使用時，左對齊和右對齊的原因可以共存混合三種類型：左對齊，居中對齊和右對齊在同一行上混合的顯示示例3種類型的混合：如何編寫CSS以在同一行中左，中，右混合混合三種類型：如果使用表格單元格，為什么可以混合左，中，右

寫入以使用CSS顯示左/中/右對齊的整行

要指定字符移位方向，例如用HTML編寫的句子，請使用CSS的text-align屬性。寫作是很簡單的，通過指定左對齊居中，值“中心”，如果你指定的“左”如下值：(居中)，將您指定的“正確”的值是右對齊。

上面的CSS源是為了應用于以下HTML源而編寫的樣式。

這是標題(居中)！ p>

2017年11月27日(右側) p>

這是文本區域。...... p>

如果您在瀏覽器中顯示這些HTML + CSS，它看起來如下圖所示。標題居中，日期右對齊，正文顯示左對齊。

標題居中的示例，日期右對齊，正文左對齊

通過這種方式，您可以僅使用CSS text-align屬性使文本左對齊，居中或右對齊。這很簡單。■ 只有text-align屬性不能混合使用不同的字符移位方向此text-align屬性指定逐個字符的字符移位方向。例如，如果p元素是右對齊的，則p元素中包含的所有句子都會一次右對齊顯示。如果要在同一行中混合不同方向的句子，則需要添加更多CSS。我稍后會告訴你如何做到這一點。

顯示左對齊和右對齊共存于同一行的示例

text-align屬性只能指定整行的字符移位方向。您無法在同一行中同時顯示左對齊部分和右對齊部分。但是，有許多場景需要在同一行中共存“左對齊句子”和“右對齊句子”。例如，您想要創建如下所示的布局。

◆HTML和CSS簡介

11月27日星期一

這種外殼是常用的設計。雖然這對文本的頂部出現的紅色標題欄將出現在同一行，題為“◆HTML和CSS入門”部分顯示在左對齊，日期“11月27日(星期一)”部分顯示右對齊我會的。如果您可以像這樣在同一行中同時顯示左對齊部分和右對齊部分，則可以節省空間并擴大設計范圍。

在上面的機箱內，標題部分左對齊，日期部分右對齊，兩者似乎都顯示在同一行上。實際上，HTML源代碼分為兩行，但我們使用CSS將其分成一行。

編寫CSS以使左對齊部分和右對齊部分共存于同一行

為了將左對齊和右對齊兩條線組合成一條線，您可以使用CSS創建布局，以便并排發布多條線(塊)。例如，請考慮以下HTML源代碼。這是一個簡單的HTML，只包含兩個帶有一個div元素的p元素。

◆HTML＆CSS簡介 p>

11月27日星期一 p> div>

在這里，為了使主題側的線左對齊，日期一側的線向右，并進一步在同一行上發布，使用以下CSS源。

.subject{ text-align：left; / *左對齊句子(*)* / float：left; / *將它帶到左端并讓它繞到右邊* /}.date { text-align：right; / *右對齊文本* /}.titlebar { background-color：＃cc0000; / * background is red * / 顏色：白色; / *轉動字符白色* / font-weight：bold; / *使其加粗* /}

在語言環境稱為一個字符從左至右，text-align屬性的標準值，因此“左”時，顯示效果，而不寫入text-align屬性可省略在上述的變化的“※”標記部分我不會。為清楚起見，我在這里寫得非常好。在瀏覽器中查看上述HTML + CSS時，顯示如下。

◆HTML和CSS簡介

11月27日星期一

左對齊部分和右對齊部分共存于一行的標題欄中，在紅色背景上顯示為白色字母。這里的重點是浮動屬性。float屬性具有將目標元素帶到左端或右端，然后將后續元素包裝到空白空間的效果。我將詳細解釋為什么它如下所示。

當text-align和float一起使用時，為什么左對齊和右對齊可以共存

您可以指定“left”或“right”作為float屬性的值。在上面的示例中，指定了“left”。如果為float屬性指定值“left”，它會將自己繪制得更靠近左端，后續內容將向右移動。通過這樣做，您可以實現在“左對齊句子”右側發布“右對齊句子”的布局。如下圖所示更改背景顏色將更容易理解正在繪制的放置位置。

通過附加不同的背景顏色可以很好地理解將兩條左對齊線和右對齊線放在一條線上的布置

標題部分“◆HTML和CSS入門”向左邊，因為在太空中的下一行，可能是右側的內容為“11月27日(星期一)，”善有善報，讓什么最初兩行出現在同一行它會變成。第一行是左對齊的，但第二行被指定為右對齊，因此似乎左對齊部分和右對齊部分在同一行中混合。

顯示左對齊，居中對齊和右對齊混合在同一行上的示例

上面的float屬性允許您將目標元素帶到左端或右端，但不能將其放在中心。因此，為了在同一條線上混合左，中，右對齊，你需要另一個聰明才智。最后，我將向您展示如何在同一行中混合所有三種類型的左對齊，居中(居中)和右對齊。以下是創建如下所示的機箱的示例。

介紹性評論

“HTML和CSS的基礎知識”

11月29日

這種外殼也是常用的設計。標題欄的紅色是單行，看起來這句話的頂部，該系列的名稱“介紹解說”是左對齊，標題為“HTML和基礎的CSS”為中心，日期“11月29日”已顯示在右對齊。通過這種方式，可以在同一行中混合三種類型的左對齊，中心對齊和右對齊。

在上面，系列名稱部分左對齊，標題部分居中，日期部分右對齊，并且所有三個都顯示在同一行。HTML源代碼分為三行，但我們使用CSS來裝飾所有三行，使它們看起來像一行。

編寫CSS以在同一行上混合左/中/右對齊

有幾種方法可以在同一行上混合左，中，右和右對齊，但在這里我們將向您展示如何為CSS顯示屬性指定值“table - cell” 。在使用CSS制作列結構時，這是一種很好用的寫作方式。首先，請考慮以下HTML源代碼。一個div元素中有三個p元素。

介紹性評論 p>

“HTML和CSS的基礎知識” p>

11月29日 p> div>

假設這個p元素從左上角，中間，右對齊的順序顯示，并且它們應該在這三行中的一行中放在一起。在這種情況下，請編寫以下CSS源代碼。

.titlebar { display：table;width：100％; background-color：＃cc0000; color：white;.category { display：table - cell; text - align：left;.subject { display：table-cell; text-align：center;.date { display：table - cell; text - align：right;}

與之前相同的是使用text-align屬性來指定左對齊/居中對齊/右對齊。但是，在一行上排列多行的方法與前一行不同。該方法將在下面詳細說明。

如果使用table-cell，為什么你可以混合左，中，右

如果為display屬性指定值“table”，則可以像表元素一樣顯示該元素。此外，如果為display屬性指定值“table - cell”，則可以像表格單元格一樣顯示該元素。結果，上面HTML源代碼中的三個p元素排列成組成表格一行的單元格，因此它們并排顯示，如下所示。

在一條線上對齊左/中心(居中)/右對齊的布置，如果您附加不同的背景顏色，您可以很好地看到結構

上圖的下部是顯示示例，其中三個p元素被賦予不同的背景顏色。通過為display屬性指定table-cell，可以看到三個p元素并排。第一個單元格(=第一個p元素)的內容左對齊顯示，第二個單元格(=第二個p元素)的內容居中，第三個單元格(= last) p元素的內容)，其在右對齊，左對齊部和中心對準部分被呈現，右對齊部分出現在同一行作為結果中進行混合。

一種用CSS以左對齊/中心對齊/右對齊方式顯示用HTML編寫的句子的方法

在本期中，我們介紹了如何編寫CSS以顯示左/中(中心)/右對齊的句子以及如何在同一行中混合不同的字符方向。您可以看到只需編寫一個簡短的HTML + CSS源即可實現它們。請利用它來創建創意布局等。

舉報/反饋

總結

以上是生活随笔為你收集整理的html中把句子往右边弄一点咋办,CSS上的左，中，右对齐方法，可以在一行上混合...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。