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

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

標(biāo)題居中的示例，日期右對齊，文本以左對齊方式發(fā)布

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

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

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

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

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

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

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

這是標(biāo)題(居中)！ p>

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

這是文本區(qū)域。...... p>

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

標(biāo)題居中的示例，日期右對齊，正文左對齊

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

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

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

◆HTML和CSS簡介

11月27日星期一

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

在上面的機(jī)箱內(nèi)，標(biāo)題部分左對齊，日期部分右對齊，兩者似乎都顯示在同一行上。實(shí)際上，HTML源代碼分為兩行，但我們使用CSS將其分成一行。

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

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

◆HTML＆CSS簡介 p>

11月27日星期一 p> div>

在這里，為了使主題側(cè)的線左對齊，日期一側(cè)的線向右，并進(jìn)一步在同一行上發(fā)布，使用以下CSS源。

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

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

◆HTML和CSS簡介

11月27日星期一

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

當(dāng)text-align和float一起使用時(shí)，為什么左對齊和右對齊可以共存

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

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

標(biāo)題部分“◆HTML和CSS入門”向左邊，因?yàn)樵谔罩械南乱恍?#xff0c;可能是右側(cè)的內(nèi)容為“11月27日(星期一)，”善有善報(bào)，讓什么最初兩行出現(xiàn)在同一行它會變成。第一行是左對齊的，但第二行被指定為右對齊，因此似乎左對齊部分和右對齊部分在同一行中混合。

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

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

介紹性評論

“HTML和CSS的基礎(chǔ)知識”

11月29日

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

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

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

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

介紹性評論 p>

“HTML和CSS的基礎(chǔ)知識” p>

11月29日 p> div>

假設(shè)這個(gè)p元素從左上角，中間，右對齊的順序顯示，并且它們應(yīng)該在這三行中的一行中放在一起。在這種情況下，請編寫以下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屬性來指定左對齊/居中對齊/右對齊。但是，在一行上排列多行的方法與前一行不同。該方法將在下面詳細(xì)說明。

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

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

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

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

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

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

舉報(bào)/反饋

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。