[学习笔记】不定宽块状元素方法

本文共有670个字,关键词:

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

3种方法
1.加入 table 标签
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody、<tr、<td)。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
2.设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。
display:inline;
}
</style
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

3.设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
摘自慕课网

Yranky Dou