在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分(持续补充)

简介: 在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分(持续补充)

搜索

文章目录


前言

不知道大家在学习 H5 的时候,有没有疑惑过,对于 align 和 valign 两种对齐方式在不同的情境下往往会有不同的取值,所表示的意思也都不尽一样。下面我就简单做一个小结,将我在学习 H5 过程中曾经疑惑过的几条做一个总结。

20201010112421131.gif


一、align 与 valign 的对齐方式与取值

align 设置水平对齐方式,取值:left、center、right

valign 设置垂直对齐方式,取值:bottom、middle、top

二、常见应用区分整理

对于下面不同情况的不同取值我将持续更新,也积极欢迎大家进行补充。

2.1、H5 页面设计的取值

在 H5 页面设计时 ,图片标记的对齐方式 align 取值为 top、bottom、middle、left、right 五个值。

具体取值情况如下图所示:

image.png

2.2、表格标题的取值

在设计表格标题时,<caption>标记对齐属性为 align 和 valign 两个值,但是 valign 取值只有 top(默认)和 bottom 两个值。

具体取值情况如下如所示:

image.png

2.3、表格属性的取值

在设计表格<tr>属性时,valign 取值则可取三个值,默认是 middle,即垂直居中对齐。align 此时默认取值是 left,即左对齐。


总结

本文是对 H5 中对齐方式的一个小结,在不同的情境下往往取值会有不同的效果,我会不断补充我开发中所遇到的,也欢迎大家前来积极补充。

20201028185323741.gif


我是白鹿,一个不懈奋斗的程序猿。望本文能对你有所裨益,欢迎大家的一键三连!若有其他问题、建议或者补充可以留言在文章下方,感谢大家的支持!


相关文章
|
3月前
|
编解码 前端开发 JavaScript
前端开发中的响应式网页设计与实现
传统的网页设计往往只适配于特定的屏幕尺寸,无法在不同设备上提供良好的用户体验。本文将介绍如何利用HTML、CSS和JavaScript技术实现响应式网页设计,使网站能够在不同设备上自适应地展现,并提供了一些实用的技巧和最佳实践。
|
10月前
|
前端开发 JavaScript API
前端综合项目-个人博客网页设计
从零设计一个页面太难了,我们可以通过预预计的效果去写代码实现!
135 0
|
前端开发 JavaScript
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
166 0
|
前端开发 算法 JavaScript
前端网页设计(笔记内容十)
前端网页设计(笔记内容十)
91 0
前端网页设计(笔记内容十)
|
前端开发
前端网页设计内容二《电商平台网站》
前端网页设计内容二《电商平台网站》
125 0
前端网页设计内容二《电商平台网站》
|
前端开发
旅游展示网站-前端网页设计技术完整精美源码HTML+CSS+JS
旅游展示网站-前端网页设计技术完整精美源码HTML+CSS+JS
230 0
旅游展示网站-前端网页设计技术完整精美源码HTML+CSS+JS
|
移动开发 前端开发
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
120 0
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
|
Web App开发 前端开发 JavaScript
前端不得不了解的5种布局方式
前端不得不了解的5种布局方式
141 1
前端不得不了解的5种布局方式
|
前端开发 容器
🍊Flex布局——前端人不得不知的布局方式!
🍊Flex布局——前端人不得不知的布局方式!
121 1
🍊Flex布局——前端人不得不知的布局方式!
|
前端开发
前端项目实战83-button按钮新的调用方式
前端项目实战83-button按钮新的调用方式
67 0