在网页布局设计中经常会遇到将一个元素居中在另一个元素的问题
通常使用的方法是设置要居中的元素的margin属性
将margin属性设置为 0 auto;
该方法将左右外边距设置为自动取值,以此来达到水平居中效果
可能有的人会遇到这样一个问题:
我使用了margin: 0 auto;为什么没有效果??
或者是,
我为<p>标签、<h1>标签添加了margin: 0 auto;为什么没有效果??
那请问,你在设置该元素的时候有没有为其定义宽度?
扫描二维码关注公众号,回复:
2397823 查看本文章
如果你需要将一个Div居中,想必你已经为其确定了大小、长宽,<p>、<h1>等标签你是否设置宽度了呢?
学习过CSS的同学都知道,p元素、h1元素等这些元素都是块状元素
无论设置其width属性为auto还是100%,块状元素都会默认占据父元素的整行
换句话说,不为其指定宽度。其width属性的值永远是父元素的宽度
避免这一情况,你需要为这些元素指定大小
新的问题是,如果指定大小。其大小不与文字的实际宽度一致,就会有预留的空白
而这预留的空白会干扰元素的居中问题
所以转了一圈回来,结论是:
margin: 0 auto;这个属性方法并不适用于存放文字的块状元素
其实是只需要为要居中的元素使用text-align: center;方法就可以了
文字会在父元素中完美居中
如果是你确定了要居中元素的大小,还是建议使用margin: 0 auto;