前言

最近老師讓大家單獨(dú)寫前后端分離項(xiàng)目，真是大家卷完后端，一起去卷前端了。（我以前都是主要負(fù)責(zé)后端，處于只大致看的懂的級(jí)別，說多了都是淚啊）。

真是處于一邊學(xué)一邊寫的狀態(tài)，基本就是每天早上看上兩~三小時(shí)視頻（主要是復(fù)習(xí)css、js、vue框架），之后開始敲代碼。

只有等到晚上回到寢室才有空寫寫文章，復(fù)習(xí)和總結(jié)一遍。

CSS：vertical-align 屬性

vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。

我們直接用案例來說明：

1）代碼：

html代碼：

<div class="box1"><img style="width: 100px; height: 100px;"src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d483b036e58b43e9a0ac93192da02f7d~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?">我是博主 寧在春,希望能和大家一起交流學(xué)習(xí)</div>

css代碼

.box1{width: 500px;height: 100px;border: 1px solid green; }

展示的效果如下：

2）問題：

你會(huì)發(fā)現(xiàn)這行字并不和圖片對(duì)齊，而是稍微在圖片下方一點(diǎn)。這個(gè)點(diǎn)對(duì)于我這個(gè)新手小白是真的難受，我一開始是拿<span>標(biāo)簽包住，然后再做處理。

然后今天才知道這個(gè)vertical-align屬性（大伙們不要罵我😁，剛來前端，請(qǐng)大家多指導(dǎo)）

vertical-align有以下值：

baseline默認(rèn)值。元素放置在父元素的基線上。

sub	垂直對(duì)齊文本的下標(biāo)。
super	垂直對(duì)齊文本的上標(biāo)
top	把元素的頂端與行中最高元素的頂端對(duì)齊
text-top	頂端對(duì)齊
middle	居中對(duì)齊
bottom	把元素的頂端與行中最低的元素的頂端對(duì)齊。
text-bottom	把元素的底端與父元素字體的底端對(duì)齊。底端對(duì)齊
inherit	規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。

如果我們想讓文字和圖片底部標(biāo)準(zhǔn)的對(duì)齊，不留縫隙的話，只要給img標(biāo)簽設(shè)置個(gè)vertical-align:text-bottom.

效果圖：

居中如下：

其他的也給大家做了一個(gè)動(dòng)圖展示：

自言自語

我之前可以說是一直是個(gè)純后端，只看過前端視頻，存有理論經(jīng)驗(yàn)。前端框架中只了解過vue框架。

個(gè)人所談：

基礎(chǔ)真的是非常重要。我現(xiàn)在就是要寫什么，很多東西不會(huì)，但是一查又是學(xué)過的，也是非常簡(jiǎn)單的。

多學(xué)多看多敲。紙上得來終覺淺，絕知此事要躬行,我之前看源碼也是如此。一定要實(shí)踐。

代碼一定要規(guī)范，這個(gè)一定要形成習(xí)慣，因?yàn)榇a始終是給別人看的。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時(shí)，都已有所成。

持續(xù)更新踩坑記錄，最近都是在學(xué)習(xí)前端…

總結(jié)

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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