var
您好,欢迎访问景安网络旗下资讯网!
运营 建站 系统 数据库 编程

首页 > HTML教程  >div 居中|text-align与vertical-align的区别

div 居中|text-align与vertical-align的区别

来源:景安IDC资讯作者:server发布时间:2015-12-07点击:8611

网页中的内容不总是填满它所在的矩形区域,因此,控制内容的对齐通常很有帮助。即使矩形区域内的文本有很多行,仍可使用对齐,因为你可能希望文本左、右或居中对齐。有两个样式属性可用于控制网页内容的对齐:text-align和vertical-align。下面小编为大家介绍一下两者的区别。

网页中的内容不总是填满它所在的矩形区域,因此,控制内容的对齐通常很有帮助。即使矩形区域内的文本有很多行,仍可使用对齐,因为你可能希望文本左、右或居中对齐。有两个样式属性可用于控制网页内容的对齐:text-align和vertical-align。下面小编为大家介绍一下两者的区别。

div 居中|text-align与vertical-align的区别


1、text-align(水平对齐)


text-align样式使元素在其定界区域内水平对齐,其取值可以是left、right、center或justify。justify使元素两端对齐。


2、vertical-align(垂直对齐)


vertical-align属性与text-align属性类似,只是用于使元素在垂直对齐。vertical-align属性指定元素如何与其父元素(在有些情况下,是与网页中元素的当前行)对齐。“当前行”指的


是显示在元素内的元素所处的垂直位置,换句话说,是内联元素。如果几个内联元素显示在同一行,可将其垂直对齐方式设置为相同,使它们垂直对齐。

下面是vertical-align属性的可能取值。


top:将元素的顶部与当前行对齐。


middle:将元素的中心与当前行对齐。


bottom:将元素的底部与当前行对齐。


text-top:将元素的顶部与父元素的顶部对齐。


baseline:将元素的基线与父元素的基线行对齐。


text-bottom:将元素的底部与父元素的底部对齐。


写在最后:


如果想使一个内容水平居中就使用text-align:align,反之如果是垂直居中使用text-align + vertical-align。


关键词: div 居中

版权声明:本文系技术人员研究整理的智慧结晶,转载勿用于商业用途,并保留本文链接,侵权必究!

本文链接:https://www.zzidc.com:443/info/htmljc/1586.html

返回顶部