margin居中

CSS 快速掌握 admin 717浏览

margin的值可以是auto auto表示“自动”的意思,当左外边距与右外边距的值都是auto时,那么这个盒子就会水平居中

注意:

●使用margin来实现水平居中时一定要有固定的宽度(给这个盒子设置一个宽度)只有块元素可以实现水平居中,行内元素是不能实现居中的

●只有标准文档流中的盒子才可以使用margin来实现水平居中

●margin属性是用来实现盒子的水平居中而不是文本的水平居中

●text-align这个属性它是用于实现文本的对齐方式,如果其值为center就表示文本水平居中但是它不能实现盒子的水平居中,

<div class="box"></div>
<p>心系祖国,志存高远</p>
<style type="text/css">
	.box{
		width: 100px;/*如果该元素没有设置固定的宽度那么这个元素就会占据其父元素的100%的宽度*/
		height: 100px;
		background-color: #f00;
		margin: 100px auto;/*使用简写属性*/
	}
	p{
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: #0f0;
	}
</style>

转载请注明:大灰牛博客 » margin居中