零基礎(chǔ)教你學(xué)前端-62、CSS文本對齊和文本間距

先，我們來學(xué)習(xí)CSS設(shè)置文本的對齊方式。

通過CSS，可以設(shè)置文本的水平和垂直對齊方式。（有案例的效果演示）

文本水平對齊，我們前面的課程曾經(jīng)接觸過——使用 text-align 這個樣式屬性來實現(xiàn)。它的屬性值有三個：left，right，center，分別表示文本水平居左，居右，居中。

我們來舉個例子。

在 005 目錄下創(chuàng)建 alignment-spacing.html 文件，構(gòu)建基礎(chǔ)代碼，添加一個 h1 元素和三個 p 元素，分別填入一些文本。

<h1>浠浠呀老師，學(xué)前端的大專生就業(yè)難嗎？</h1>

<p>

no, 不難，只要你能力過關(guān)、項目經(jīng)驗過關(guān)、人品過關(guān)，企業(yè)就會錄用你。

</p>

<p>

你可以在面試的時候，著重介紹一下你的開發(fā)能力、技術(shù)能力以及你對技術(shù)理解，讓別人挑不出毛病，那學(xué)歷這塊是可以自動忽略的。

</p>

<p>

我在面試別人的時候也是這樣，如果這個人的技術(shù)能力和過往經(jīng)驗真的征服了我，我不是很在他乎他的學(xué)歷。

</p>

我們可以給三個段落文本，設(shè)置不同的水平對齊方式，給三個 p 元素定義 class 屬性，值分別為 a，b，c。

在這個目錄下再創(chuàng)建一個 mystyle-2.css 文件，定義 p.a (讀作p點a) 選擇器，聲明樣式 text-align: left (不要讀冒號)。定義 p.b 選擇器，聲明樣式 text-align: center。定義 p.c 選擇器，聲明樣式 text-align: right。

p.a {

text-align: left;

}

p.b {

text-align: center;

}

p.c {

text-align: right;

}

在瀏覽器中預(yù)覽效果，三個段落分別左、中、右對齊了。

當(dāng) text-align 屬性被設(shè)置為 justify [?d??st?fa?]時，每一行都被拉長，使每一行都有相等的寬度，而且左右邊界是對齊的，就像雜志和報紙排版一樣。

注釋掉全部樣式，定義 p 選擇器，聲明樣式 text-align: justify。

我們看，貌似沒有什么效果。

為了演示，給第一個段落添加單詞 no, (讀作no 英文的逗號) 。再給 p 元素聲明一個樣式 width: 200px。

再看效果，三個段落的兩側(cè)都是對齊的。

假如注釋掉這個樣式，

很明顯，右側(cè)不再對齊顯示了。

除了水平對齊，還可以設(shè)置文本的垂直對齊。通過聲明 vertical-align 屬性來實現(xiàn)。值有五個：

baseline，基線對齊。

text-top，文本頂部對齊。

text-bottom，文本底部對齊。

sub，下角標(biāo)對齊。

super，上角標(biāo)對齊。

在 html 文件中添加一個 h1 元素，5個 p 元素。填入一些文本。在每個段首添加一個 img 元素，引入本地的一個小圖片，圖片的寬高都為 9px。給每個圖片元素定義 class 屬性，值分別為 a，b，c，d，e。

在樣式表中，定義 img.a 選擇器，聲明樣式 vertical-align: baseline。

baseline 是如何對齊的呢？看效果，在垂直方向好像是居中對齊。

實際上，baseline 是基于四線三格倒數(shù)第二行對齊的。對于英文文本才有意義。

比如，將 1 修改為 fight 1。

基線在這，文本中的圖片就基于它來對齊。

再定義 img.b，img.c，img.d，img.e 四個選擇器，給他們都聲明 vertical-align 屬性，值分別為 text-top，text-bottom，sub，super 。

看看效果，圖片垂直方向上，已經(jīng)相對于文本頂部、底部、上角標(biāo)、下角標(biāo)的位置對齊了。

接下來，我們學(xué)習(xí)如何設(shè)置文本的間距。

通過 CSS，可以實現(xiàn)文本縮進、文字或字母間距、行高、單詞間距和處理空白。（有案例的效果演示）

聊起文本縮進，你還記得以前是如何實現(xiàn)自然段首行縮進的嗎？可以發(fā)彈幕告訴大家！

通過聲明 CSS 的 text-indent 屬性也可以實現(xiàn)。使?長度值或百分?來設(shè)置?本縮進。

長度值可以使?絕對單位或相對單位。絕對單位就是 px，比如縮進 50px；相對單位最常用的是 em，縮進的寬度為字符寬度的倍數(shù)，一般設(shè)置為 2em，就是空兩格。

字符寬度——如果是中文方塊字，也可以稱為字體大小，它是通過 font-size 屬性來設(shè)置的，這個屬性在后面 CSS 字體課程中會詳細介紹。

百分?縮進寬度，是根據(jù)?元素的寬度計算得到。這個很少使用。

給 p 元素聲明 text-indent 屬性，值為 2em。

仔細觀察，每個自然段縮進貌似不是2個字的寬度，這是為什么呢？

你應(yīng)該想到了，把 text-align: justify 注釋一下，就是我們要的效果了。

letter-spacing 屬性用于指定中文文字或英文字母之間的空隙。

在樣式中，定義 h1 選擇器，聲明樣式 letter-spacing: 5px。

這樣，標(biāo)題文字間就有了 5px 的空隙。

line-height 屬性用于指定行與行之間的高度，也就是行高。屬性值常用的有三個：

第一，normal，也是默認值，瀏覽器會根據(jù)字符大小自動設(shè)置一個行高。

第二，一個數(shù)字，比如 1.5。此數(shù)字與當(dāng)前的字符大小相乘計算得到。推薦使用。

第三，絕對值，比如 20px，-5px。設(shè)置固定的行間距。

在沒有設(shè)置 line-height 屬性時，我們看到每一行的間距是這樣的。

回到樣式代碼，給 p 元素聲明樣式 line-height: normal。

我們看到效果沒有變化。

修改 line-height 屬性值為 1。

再來看，每個段落的行間距消失了。

再次修改 line-height 為 10px，行與行之間疊加到了一起。

是不是和你理解的行高不一樣呢？看來，我們得需要仔細研究一下：行高到底是如何計算的。

這是兩行中文和英文混合的文本。

在文字頂端畫一條線，取名叫頂線。在文字底端畫一條線，取名叫底線。在文字中間畫一條線，取名叫中線，再畫一條英文的基線。上一行文字的底線，到下一行文字的頂線，他們之間的空隙稱為行距。

實際上，line-height 設(shè)置的行高值，是兩行基線的距離。

這里你可能會問，基線不是英文文本才有的嗎？其實，不管文本里有沒有英文，基線都是一直存在的。

了解了這個原理，你就能理解 line-height: 1，為啥沒有行距了。因為 1 乘以文字的高度，結(jié)果還是文字的高度。而文字的高度，恰好等于兩行基線之間的距離，所以行距為 0。

word-spacing 屬性用于指定文本中單詞的間距，只對英文有效。

給 p 元素再聲明一個 word-spacing: 20px 樣式。

我們看，單詞 no 和 fight 后面就有了 20個像素的間距。

white-space 屬性指定了如何處理元素內(nèi)部的空白。有一個常用的值，nowrap，不管包含文本的元素寬度是多少，文本都不會換行，直到遇見 <br> 標(biāo)簽為止。

給 p 元素再聲明一個 white-space: nowrap 樣式。

此時，每個段落都在一行顯示了。雖然我們給 p 元素聲明了 width: 200px，他也會視而不見，繼續(xù)倔強的在一行顯示。

文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=63

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

在網(wǎng)頁中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語是用來設(shè)計和布局時使用的;CSS盒模型本質(zhì)上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實際內(nèi)容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的

1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

標(biāo)準(zhǔn)盒子模型

寬度為100px的div

根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設(shè)置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據(jù)一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設(shè)置為右浮動

1)當(dāng)d1,d2都設(shè)置為右浮動時:因為css中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測試不再截圖

2)當(dāng)d1,d2都設(shè)置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設(shè)置左或右浮動,當(dāng)3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設(shè)置為右浮動

當(dāng)d2清除了左浮動,d3設(shè)置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當(dāng)d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網(wǎng)頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內(nèi)核的瀏覽器對W3C的規(guī)范不怎么遵守

SS 是前端里面的基礎(chǔ)之一，也是非常重要的一部分，它往往決定了你所做出來的網(wǎng)頁頁面是否美觀。在設(shè)計網(wǎng)頁頁面的過程中，總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。

一、使用 margin:auto

當(dāng)元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設(shè)置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設(shè)置為 0。

HTML 代碼

<div class="box">
  <div class="center1"></div>
</div>

CSS 代碼

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

當(dāng)已經(jīng)知道了要進行水平垂直居中的元素的寬高時，就可以通過設(shè)置 position: absolute 來實現(xiàn)。但是，使用的同時還需要結(jié)合其他屬性才完整實現(xiàn)。因為，單是設(shè)置 absolute，上左距離均為一半，就會出現(xiàn)下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點

概念圖：

因此想要實現(xiàn)元素完全水平垂直居中，在設(shè)置了 absolute 定位后，可以設(shè)置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。

margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設(shè)不知道元素的寬高，那么怎么實現(xiàn)水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標(biāo)位移來實現(xiàn)居中。

CSS 代碼

/* 結(jié)合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 結(jié)合 calc 計算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 結(jié)合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用彈性布局

可以通過彈性布局來設(shè)置水平垂直居中，這里需要設(shè)置父級元素 display:flex; 還需要設(shè)置兩個屬性，水平布局 justify-content 以及垂直布局 align-items。

HTML代碼

<div class="box2">
  <div class="center4"></div>
</div>

CSS代碼：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平對齊和行高

前面介紹的是元素如何實現(xiàn)水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經(jīng)常用的，使用文本水平對齊 text-align 和行高 line-height 來實現(xiàn)的。

HTML 代碼

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代碼

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用網(wǎng)格布局

第二個方法可以通過網(wǎng)格布局 grid 來實現(xiàn)。而這里通過 grid 有兩種方式實現(xiàn)，一種對元素本身屬性進行設(shè)置，另一種在元素的父級元素中設(shè)置。兩者看上去內(nèi)容似乎差不多，不同的是在元素中設(shè)置的是 align-self 還要多了一個 margin，父級元素中是 align-items。

相關(guān)代碼：

/* grid 元素中設(shè)置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父級元素中設(shè)置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、總結(jié)

以上就是關(guān)于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關(guān)于 CSS 實現(xiàn)水平垂直居中的方法嗎？請在評論區(qū)留下你的想法。

關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~

在線咨詢

上一篇：亞馬遜LISTING流程化運營體系：關(guān)于亞馬遜賣家聯(lián)盟（Amazon affiliate）注冊操作流程全解析
下一篇：iPhone16怎么關(guān)閉按鍵震動?iPhone16按鍵震動關(guān)閉方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

零基礎(chǔ)教你學(xué)前端-62、CSS文本對齊和文本間距

一、使用 margin:auto

二、使用 position:absolute

三、使用彈性布局

四、文本水平對齊和行高

五、使用網(wǎng)格布局

六、總結(jié)

您的項目需求