css对齐之html元素居中、左右对齐的方法笔记

原创 PHP笔记  2017-03-29 17:35  阅读 3,829 views 次

html网页中,元素的对齐也是用的比较多的,今天就学习一些css控制元素水平对齐的方法。

块元素对齐

块元素的特点是占据全部宽度,在其前后都会换行。例如:<h1>、<p>、<div>等

1、margin属性设置居中对其

实例:

......
<body>
<style type="text/css">
div{width:500px;height:200px;border:1px solid red;margin:auto;}
</style>
<div>margin属性设置html元素剧中对齐示例</div>
</body>
......

运行结果:

说明:margin:auto;相当于margin-left:auto; margin-right:auto; margin-top:auto;margin-bottom:auto; 。auto的意思是均等的分配外边距,但对垂直方向不起作用,所以margin:auto;的效果和margin-left:auto; margin-right:auto; 的效果一样。

2、position 属性设置左右对齐

html元素默认就是左对齐的,所以不需要任何操作。而右对齐就需要设置css属性来控制了。

实例:

......
<body>
<style type="text/css">
div{width:400px;height:200px;border:1px solid red;position:absolute;right:0px;}
</style>
<div>position属性设置html元素右对齐示例</div>
</body>
......

运行结果:

3、float 属性设置左右对齐

实例:

......
<body>
<style type="text/css">
div{width:400px;height:200px;border:1px solid red;float:right;}
</style>
<div>float属性设置html元素右对齐示例</div>
</body>
......

运行结果:

说明:网页必须有!DOCTYPE声明,要不然有些浏览器版本不支持。

本文地址:https://www.ggbiji.com/css-alignment.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情