前言

最近老師讓大家單獨寫前后端分離項目，真是大家卷完后端，一起去卷前端了。（我以前都是主要負責后端，處于只大致看的懂的級別，說多了都是淚啊）。

真是處于一邊學一邊寫的狀態，基本就是每天早上看上兩~三小時視頻（主要是復習css、js、vue框架），之后開始敲代碼。

只有等到晚上回到寢室才有空寫寫文章，復習和總結一遍。

CSS：vertical-align 屬性

vertical-align 屬性設置元素的垂直對齊方式。

我們直接用案例來說明：

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?">我是博主 寧在春,希望能和大家一起交流學習</div>

css代碼

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

展示的效果如下：

2）問題：

你會發現這行字并不和圖片對齊，而是稍微在圖片下方一點。這個點對于我這個新手小白是真的難受，我一開始是拿<span>標簽包住，然后再做處理。

然后今天才知道這個vertical-align屬性（大伙們不要罵我😁，剛來前端，請大家多指導）

vertical-align有以下值：

baseline默認值。元素放置在父元素的基線上。

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

如果我們想讓文字和圖片底部標準的對齊，不留縫隙的話，只要給img標簽設置個vertical-align:text-bottom.

效果圖：

居中如下：

其他的也給大家做了一個動圖展示：

自言自語

我之前可以說是一直是個純后端，只看過前端視頻，存有理論經驗。前端框架中只了解過vue框架。

個人所談：

基礎真的是非常重要。我現在就是要寫什么，很多東西不會，但是一查又是學過的，也是非常簡單的。

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

代碼一定要規范，這個一定要形成習慣，因為代碼始終是給別人看的。

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

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

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

持續更新踩坑記錄，最近都是在學習前端…

總結

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

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