购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 对齐 - 水平 & 垂直对齐


元素居中对齐

要使一个元素水平居中对齐可以使用 margin: auto;来实现

设置元素的宽度将防止它溢出到容器的边缘

元素通过指定宽度,并将两边的空外边距平均分配

实例

div{
width:100px;
margin:auto;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
	<div>元素居中对齐</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图


注意:如果没有设置 width 属性值(或者设置 100%),居中对齐将不起作用

文本居中对齐

设置文本在元素内居中对齐,可以使用 text-align: center;

实例

div{
width:100px;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

使用 position 属性设置左和右对齐

我们可以使用 position: absolute; 属性来对齐元素

实例

div{
position:absolute;
width:100px;
right:0;
padding: 20px;
border: 1px solid #ccc;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 9.jpg

注意:绝对定位元素会被从正常流中删除,并且能够交叠元素

跨浏览器兼容性问题

当使用 position 来对齐元素时, 通常 <body>元素会设置 margin 和 padding,这样做的好处是可以避免在不同的浏览器中出现可见的差异

当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明

float属性设置左右齐

注意:如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候可以使用 "clearfix(清除浮动)" 来解决问题


实例

.parent{
	width:400px;
	padding: 25px;
	border: 1px solid #ccc;

}
.clearfix{
	overflow: auto;
}
.child{
width:200px;
height: 100px;
border: 1px solid #444;
float: left;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

未标题-2.jpg

注意:当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。所以当使用 float 属性时,请始终设置 !DOCTYPE 声明

水平垂直居中定位:

可以使用text-align: center,line-height来实现文本水平垂直居中

实例

.parent{
	width:450px;
	height:300px;
	background-color: pink;
	text-align: center;
	line-height: 300px;
	font-size: 20px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 12.jpg

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号