文章目錄

• 前言
• 一、align 與 valign 的對(duì)齊方式與取值
• 二、常見應(yīng)用區(qū)分整理
• • 2.1、H5 頁面設(shè)計(jì)的取值
  • 2.2、表格標(biāo)題的取值
  • 2.3、表格屬性的取值
• 總結(jié)

---

前言

不知道大家在學(xué)習(xí) H5 的時(shí)候，有沒有疑惑過，對(duì)于 align 和 valign 兩種對(duì)齊方式在不同的情境下往往會(huì)有不同的取值，所表示的意思也都不盡一樣。下面我就簡單做一個(gè)小結(jié)，將我在學(xué)習(xí) H5 過程中曾經(jīng)疑惑過的幾條做一個(gè)總結(jié)。

---

一、align 與 valign 的對(duì)齊方式與取值

align 設(shè)置水平對(duì)齊方式，取值：left、center、right
valign 設(shè)置垂直對(duì)齊方式，取值：bottom、middle、top

二、常見應(yīng)用區(qū)分整理

對(duì)于下面不同情況的不同取值我將持續(xù)更新，也積極歡迎大家進(jìn)行補(bǔ)充。

2.1、H5 頁面設(shè)計(jì)的取值

在 H5 頁面設(shè)計(jì)時(shí) ，圖片標(biāo)記的對(duì)齊方式 align 取值為 top、bottom、middle、left、right 五個(gè)值。

具體取值情況如下圖所示：

2.2、表格標(biāo)題的取值

在設(shè)計(jì)表格標(biāo)題時(shí)，<caption>標(biāo)記對(duì)齊屬性為 align 和 valign 兩個(gè)值，但是 valign 取值只有 top（默認(rèn)）和 bottom 兩個(gè)值。

具體取值情況如下如所示：

2.3、表格屬性的取值

在設(shè)計(jì)表格<tr>屬性時(shí)，valign 取值則可取三個(gè)值，默認(rèn)是 middle，即垂直居中對(duì)齊。align 此時(shí)默認(rèn)取值是 left，即左對(duì)齊。

---

總結(jié)

本文是對(duì) H5 中對(duì)齊方式的一個(gè)小結(jié)，在不同的情境下往往取值會(huì)有不同的效果，我會(huì)不斷補(bǔ)充我開發(fā)中所遇到的，也歡迎大家前來積極補(bǔ)充。

---

我是白鹿，一個(gè)不懈奮斗的程序猿。望本文能對(duì)你有所裨益，歡迎大家的一鍵三連！若有其他問題、建議或者補(bǔ)充可以留言在文章下方，感謝大家的支持！

總結(jié)

以上是生活随笔為你收集整理的在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分（持续补充）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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