在前端网页设计中 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


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


相关文章
|
2月前
|
前端开发 UED 开发者
【前端秘籍】掌握 display: none 与 visibility: hidden 的奥秘,让你的网页设计更上一层楼!
【8月更文挑战第23天】在Web前端开发中,常需控制元素的可见性。本文详细对比了两种主流CSS隐藏方法:`display: none`和`visibility: hidden`。`display: none`彻底移除元素在页面布局中的位置,适用于无需保留空间的隐藏场景;而`visibility: hidden`仅使元素视觉上消失,仍保留其布局位置,适用于需要动画效果或保留布局结构的情况。通过具体示例展示了两种方法的实际应用,帮助开发者根据项目需求选择最合适的方式,提升用户体验。
46 0
|
3月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
3月前
|
缓存 前端开发
网页设计,若依修改06(It must be done)-----前端post请求用data传参数
网页设计,若依修改06(It must be done)-----前端post请求用data传参数
|
5月前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
77 5
|
5月前
|
前端开发 JavaScript 开发者
网页设计与开发:一篇文章带你领略前端世界的魅力
网页设计与开发:一篇文章带你领略前端世界的魅力
233 1
|
5月前
|
编解码 前端开发 JavaScript
前端开发中的响应式网页设计与实现
传统的网页设计往往只适配于特定的屏幕尺寸,无法在不同设备上提供良好的用户体验。本文将介绍如何利用HTML、CSS和JavaScript技术实现响应式网页设计,使网站能够在不同设备上自适应地展现,并提供了一些实用的技巧和最佳实践。
|
前端开发 JavaScript API
前端综合项目-个人博客网页设计
从零设计一个页面太难了,我们可以通过预预计的效果去写代码实现!
167 0
|
前端开发 JavaScript
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
197 0
|
Web App开发 前端开发 JavaScript
前端不得不了解的5种布局方式
前端不得不了解的5种布局方式
179 1
前端不得不了解的5种布局方式
|
前端开发 容器
🍊Flex布局——前端人不得不知的布局方式!
🍊Flex布局——前端人不得不知的布局方式!
147 1
🍊Flex布局——前端人不得不知的布局方式!