1、行内元素水平居中,可以在父元素中使用text-align:center;垂直居中可以用,line-height:100px;例如:
<style type="text/css"> div{ width:300px; height:100px; text-align:center; line-height:100px; } </style> <div> <span>文字居中</span> </div>
2、块级元素水平居中,可以用margin:auto;代码如下:
<style type="text/css"> div{ width:300px; height:100px; margin:0px auto;//上下边距为0,水平居中 background:#ccc; } </style> <div> <span>文字居中</span> </div>
3、元素绝对居中,利用定位position,代码如下:
<style type="text/css"> div{ width:300px; height:100px; position:relative; } div p{ width:100px; height:20px; position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; } </style> <div> <p>文字居中</p> </div>
4、元素绝对居中的另一种方法,代码如下:
<style type="text/css"> div{ width:300px; height:100px; position:relative; background:#bbb; } div p{ width:100px; height:20px; position:absolute; top:50%; margin-top:-10px; left:50%; margin-left:-50px; } </style> <div> <p>文字居中</p> </div>
文章作者:博客之家
文章標題:在网页中常用到的几种居中方法
文章鏈接:https://www.blogs.hk/2871.html
本站所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議,轉載請註明來自博客之家 !
文章標題:在网页中常用到的几种居中方法
文章鏈接:https://www.blogs.hk/2871.html
本站所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議,轉載請註明來自博客之家 !
发表评论