在前端網頁設計中 align 和 valign 兩種對齊方式的不同取值區分(持續補充)

文章目錄

  • 前言
  • 一、align 與 valign 的對齊方式與取值
  • 二、常見應用區分整理
    • 2.1、H5 頁面設計的取值
    • 2.2、表格標題的取值
    • 2.3、表格屬性的取值
  • 總結


前言

不知道大家在學習 H5 的時候,有沒有疑惑過,對于 align 和 valign 兩種對齊方式在不同的情境下往往會有不同的取值,所表示的意思也都不盡一樣。下面我就簡單做一個小結,將我在學習 H5 過程中曾經疑惑過的幾條做一個總結。

在這里插入圖片描述


一、align 與 valign 的對齊方式與取值

align 設置水平對齊方式,取值:left、center、right
valign 設置垂直對齊方式,取值:bottom、middle、top

二、常見應用區分整理

對于下面不同情況的不同取值我將持續更新,也積極歡迎大家進行補充。

2.1、H5 頁面設計的取值

在 H5 頁面設計時 ,圖片標記的對齊方式 align 取值為 top、bottom、middle、left、right 五個值。

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

在這里插入圖片描述

2.2、表格標題的取值

在設計表格標題時,<caption>標記對齊屬性為 align 和 valign 兩個值,但是 valign 取值只有 top(默認)和 bottom 兩個值。

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

在這里插入圖片描述

2.3、表格屬性的取值

在設計表格<tr>屬性時,valign 取值則可取三個值,默認是 middle,即垂直居中對齊。align 此時默認取值是 left,即左對齊。


總結

本文是對 H5 中對齊方式的一個小結,在不同的情境下往往取值會有不同的效果,我會不斷補充我開發中所遇到的,也歡迎大家前來積極補充。

在這里插入圖片描述


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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/530791.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/530791.shtml
英文地址,請注明出處:http://en.pswp.cn/news/530791.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

H5 中 bordercolorlight 屬性的用法及作用

一、問題場景 今天在復習 H5 頁面設計表格&#xff0c;發現<table>標簽中添加了新的屬性&#xff1a;bordercolorlight。我們來看看有什么作用。 示例如下&#xff1a; table bordercolorlight"顏色值"&#xff08;黃色部分&#xff09;效果如下圖所示&…

從數據傳輸的角度辨析表單設計時的 get 和 post 提交方法

文章目錄前言一、get 方法1.1、get 方法對傳輸的字符數有限制1.2、get 方法不具有保密性1.3、get 方法不能傳輸非 ASCII 碼的字符1.4、get 方式提交數據被保存在請求數據包的請求行中二、post 方法2.1、post 方式提交表單數據大小沒限制2.2、post 方式所傳輸的數據不會顯示在瀏…

提交文件至服務器的設置——表單屬性中的 enctype

文章目錄前言一、enctype 屬性設置二、文件域的設置總結前言 我們在使用 HTML 寫表單的時候&#xff0c;如果需要上傳本地文件至服務器&#xff0c;我們就需要對文件域中的 enctype 屬性進行調整并設置提交方式&#xff0c;本文對這一屬性做了簡單總結和案例介紹。 一、enctyp…

Tomcat 應用服務器如何設置 Web 服務目錄精講

文章目錄前言一、設置 Web 服務根目錄1.1、根目錄的位置1.1.1、根目錄的默認訪問地址&#xff08;設置 IP&#xff09;1.1.2、根目錄的默認訪問地址&#xff08;未設置 IP&#xff09;二、設置 webapps 下的 Web 服務目錄三、新建 Web 服務目錄四、設置相對目錄總結前言 我們在…

Java 版本、語言規范、API、JDK、IDE、Java 源程序編譯、執行原理(跨平臺性根本原因)、特殊字符用法、8 大數據類型小結

文章目錄前言一、三大版本類型二、Java 語言規范三、應用程序接口&#xff08;API&#xff09;四、Java 開發工具包&#xff08;JDK&#xff09;五、集成開發環境&#xff08;IDE&#xff09;六、Java 運行環境&#xff08;JRE&#xff09;七、Java 源程序編譯、執行原理&#…

常見的技術類英文字母含義總結,Localhost、SDK、URL 等(持續更新中)

文章目錄前言一、Localhost二、SDK三、URL總結前言 我們在開發中經常會遇到一些技術類的英文單詞&#xff0c;初遇可能會有些陌生&#xff0c;在此為了方便大家&#xff0c;同時便于自己查看一些名詞&#xff0c;就做了一個小結&#xff0c;如果我不懶的話就持續更新本文了&…

使用 Eclipse 建立包的時候,“name”下可選項“Create package-info.java”的作用是什么?

一、場景描述 我們在使用 Eclipse 開發項目建包的時候&#xff0c;你是否發現在“name”下有可選項“Create package-info.java”&#xff0c;除了根據英文譯出的“創建包說明”還有什么作用呢&#xff1f; 二、作用 聲明友好類和包內訪問常量。為在包上標注注解提供便利。提…

啟動 Tomcat 應用服務器端口 8080 被占用排查思路及解決方式

文章目錄前言一、Tomcat 應用服務器端口 8080 被占用二、如何解決端口被占用2.1、列出所有端口的使用情況2.2、查看被占用端口對應的 PID2.3、回車查看占用端口的具體程序2.4、結束目的進程總結前言 我們在啟動 Tomcat 應用服務器運行項目的時候&#xff0c;如果上次我們沒有正…

Eclipse 插件用法:Eclipse 利用 Amateras UML 生成 Java 類圖、時序圖和 UML 類圖

文章目錄前言一、安裝 Eclipse 官方提供的安裝框架 GEF1.1、Eclipse 中第三方插件更新/安裝策略1.2、為什么選擇 GEF 框架&#xff1f;1.3、GEF 框架安裝二、安裝 Amateras UML2.1、Amateras UML 插件下載2.2、將 Amateras UML 集成到 GEF 安裝框架中2.3、重新啟動&#xff0c;…

Eclipse 的常見報錯、警告和原因分析、解決方式以及相關操作快捷鍵小結(持續更新)

文章目錄前言一、常見的三種類型錯誤二、運行時錯誤總結前言 Eclipse 作為我們開發中最為常用的一款 IDE&#xff0c;功能齊全&#xff08;雖然近幾年被 IDEA 占盡了風頭&#xff09;&#xff0c;但是最為基本的一些操作我們是要熟知的&#xff0c;比如常見的報錯、警告和原因以…

Windows 系統中常見的 Shell 命令總結(不時補充)

文章目錄前言一、調出電腦 Windows IP 配置二、生成文件目錄結構樹三、創建文件夾四、刪除空目錄五、顯示目錄和文件六、進入目錄七、刪除文件八、刪除目錄并同時刪除目錄中的子目錄以及文件8.1、del 的其他命令說明總結前言 Windows 命令提示符&#xff08;cmd.exe&#xff09…

大數據入門系列 2:全網最全,VMware 虛擬機上安裝 Ubuntu 完整步驟及需要注意的問題

文章目錄前言一、自備 VMware 虛擬機二、下載 Ubuntu 鏡像文件2.1、下載安裝 ubuntu 系統時 LTS 版本和正式版本的區別&#xff1f;2.2、Ubuntu 版本更新規則三、VMware 虛擬機上配置 Ubuntu 安裝環境3.1、在 VMware 新建一個虛擬機3.2、配置類型選擇自定義3.3、虛擬機硬件兼容…

Maven 系列 1:Maven 安裝與環境變量的配置完整步驟及需要注意的問題(以 jdk1.8、Maven 3.6.2 和 win10 為例,附下載地址)

文章目錄 前言一、下載安裝 Maven1.1、官網下載 Maven 安裝包1.2、Maven 安裝目錄進行分析說明1.3、注意 Maven 安裝的系統要求二、檢查本地 Java 環境變量的配置2.1、JAVA_HOME 變量的配置2.2、CLASSPATH 變量的配置2.3、Path 變量的配置2.4、檢查 Java 環境變量是否配置成功三…

Eclipse 答疑:Eclipse 如何更換夜間及外部主題?如何修改代碼樣式、背景顏色、字體大小?為何注釋文字大小不一?

文章目錄前言一、更換 Eclipse 自帶黑色“Dark”主題二、設修改代碼的樣式及背景顏色三、設置代碼字體和大小&#xff08;解決注釋字體不一原因&#xff09;四、下載外部主題進行更換4.1、進入 Eclipse Marketplace4.2、搜索 Eclipse Marketplace 提供的主題下載4.3、查看下載及…

Eclipse 安裝插件報錯:An error occurred while collecting items to be installed session context was...解決方法匯總

文章目錄前言一、產生錯誤的場景二、錯誤信息描述三、出錯原因分析3.1、錯誤原因定位3.2、Eclipse 的更新管理 P2 出錯四、解決方式4.1、進入 Eclipse 的安裝根目錄4.2、修改 Eclipse 配置文件五、本解決方式適用范圍六、其他類似問題如何解決&#xff1f;6.1、Access is denie…

Java 答疑:JDK 11(Java 11)之后沒有 JRE 目錄,環境用戶變量配置的解決方法

文章目錄前言一、JDK 11&#xff08;Java 11&#xff09;之后 JRE 說明二、選擇自己需要的 JDK 版本三、對下載的 JDK 進行解壓四、執行 Dos 命令生成 JRE總結前言 我們之前的 JDK 1.8 版本乃至以下版本壓縮包下載解壓后直接運行會生成 JDK、JRE 兩個目錄文件&#xff0c;但從 …

Maven 系列 2:Maven 本地倉庫與遠程倉庫配置完整步驟以及修改 settings.xml 后的完整內容(配置非私服,遠程倉儲鏡像強力推薦阿里云)

文章目錄 前言一、Maven 三大倉庫說明1.1、本地倉庫1.2、遠程倉庫(私庫、鏡像倉庫)1.3、Maven 中央倉庫1.4、三大倉庫的檢索順序二、Maven 管理項目的生命周期三、本地倉庫的配置步驟3.1、修改 setting.xml 文件指定本地倉庫位置3.2、或者在命令界面指定本地倉庫位置四、中央…

Maven 系列 3:如何在 Eclipse 中集成配置 Maven(以 apache-maven-3.6.2、eclipse-jee-2019-09-R-win32-x86_64 為例)

文章目錄 前言一、打開 Eclipse 進入 Maven 配置頁面二、將本地 Maven 路徑對應到 Eclipse 中三、將配置文件集成到 Eclipse 中四、開啟 Eclipse 的 Maven 視圖五、檢查 Maven 中央庫地址和鏡像服務器地址總結前言 首先很榮幸也很感謝大家查看和訂閱我的專欄,在這里為大家再次…

大數據入門系列 3:全網最全,Ubuntu 安裝 VMware Tools 完整步驟及需要注意的問題

文章目錄前言一、啟動 Mware 虛擬機二、打開 terminal 命令界面三、檢查軟件包更新四、安裝 VMware Tools五、檢查 VMware Tools 是否安裝成功總結前言 盡管客戶機操作系統在未安裝 VMware Tools 的情況下仍可運行&#xff0c;但許多 VMware 功能只有在安裝 VMware Tools 后才可…

Eclipse 答疑:Eclipse 如何設置 Java 代碼自動提示和自動補全?

文章目錄前言一、打開 Eclipse 進入配置頁面二、進入 Java 的設置三、輸入補全信息四、應用檢查總結前言 在課堂上或者是開發大佬面前&#xff0c;你也許總是能夠看到大佬們只要在敲代碼時啪啪啪敲幾個按鍵就可以出來一堆代碼&#xff0c;你會不會很羨慕&#xff1f;那么&#…