我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别
三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。
在这个前提下,我们应该怎么设置元素在水平方向上的居中呢?
行内元素的水平居中设置
行内元素的水平居中有一个通用的方法:通过在其父元素中设置text-align:center来实现:
我们给出一个html文件,写入一个div块状元素,包裹一个span内联元素:
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><div><span>这是一个行内元素</span></div></body></html>
父元素div的css样式当中,用text-align: center;对span元素进行“水平居中”设置。
为了突出显示父元素div和子元素span之间的位置关系,设置一下背景颜色:
div{width: 200px;height: 100px;background-color: yellow;text-align: center;}span{background-color: orange;}
块状元素的水平居中
块状元素又分为定宽块状元素(width值固定)和不定宽块状元素(width的值不固定)。两种情况下有不同的设置水平居中方式:
定宽块状元素:
设置margin:0 auto,即设置一下上下margin值,然后把左右margin值设置为auto,让这个块状元素的左右margin值自动调整。
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><div><div id="son">这是一个定宽块状元素</div></div></body></html>
div{width: 200px;height: 100px;background-color: yellow;text-align: center;}#son{margin: 0 auto;width: 160px;height: 30px;background-color: orange;}
注意:只有同时满足“定宽”和“块状元素”两个条件,才能使用“margin:0 auto”来设置水平居中!
不定宽块状元素
不定宽块状元素的水平居中设置有几种方法:
使用table标签:
table法当中,我们在html代码当中让块状元素div成为table->td里的内容,然后再设置table的margin为0 auto,对table进行水平居中设置。
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><table><tr><td><div id="son">这是一个不定宽块状元素,table标签具有长度自适应性,因此可以看成一个定宽块状元素。然后再利用定宽块状元素的margin:0 auto方法实现水平居中</div></td></tr></table></body></html>
table{border:1px solid red;margin: 0 auto;}#son{background-color: orange;}
2. 将该元素设置为行内元素,然后再用行内元素的水平居中方法(该元素display:inline;该元素的父元素text-align:center):
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><div><div id="son">这是一个不定宽块状元素</div></div></body></html>
div{width: 300px;height: 100px;background-color: blue;text-align: center;/*父元素设置text-align:center*/}#son{display: inline;/*子元素设置display:inline;*/height: 30px;background-color: orange;}
3. 设置该元素的父元素左浮动,并进行定位(float:left;position:relative;left:50%?,
该元素利用相对定位的方式,相对于其自身向左移动50%。
(position:relative; left:-50%)
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><div id="father"><div id="son">这是一个不定宽块状元素,父元素和子元素的宽度都不确定,用float浮动,再用position定位。</div></div></body></html>
#father{/*让父元素浮动起来,再定位到body的中线位置*/float: left;position: relative;left: 50%;}#son{/*相对于父元素定位,定位到向左偏移50%的位置*/position: relative;left: -50%;background-color: orange;}
4、将父元素设置为弹性盒(display:flex;)目标元素设置外边距自动(margin:auto)
<!DOCTYPE html><html><head><title>前端试题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="前端试题.css"></head><body><div id="father"><div id="son">这是一个不定宽块状元素,父元素设置为弹性盒来实现水平居中</div></div></body></html>
#father{display: flex;background-color: yellow;}#son{margin: 10px auto;height: 50px;background-color: orange;}