深圳网站制作公司易捷网络欢迎您,我司主营业务:深圳企业网站制作,欢迎来电。
深圳企业网站制作
深圳网站制作业务咨询
0755-61603557
赵先生:13714247375
深圳网站制作技术支持
您现在的位置:网站首页 > 深圳网站制作教程

CSS3实现不同元素水平居中、垂直居中的方法

文章作者:易捷网站制作公司编辑    文章来源:深圳网站制作公司-易捷网络
水平居中

?行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的

?定宽块状元素

当被设置元素为块状元素时用text-align:center就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

?在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

?不定宽块状元素1

1)为需要设置的居中的元素外面加入一个table标签(包括tbody、tr、td)。

2)为这个table设置“左右margin居中。

?不定宽块状元素2

改变块级元素的dispaly为inline类型,然后使用text-align:center来实现居中效果


?不定宽块状元素3

通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置osition:relative和left:-50%来实现水平居中

垂直居中

?父元素高度确定的单行文本

垂直居中的方法是通过设置父元素的height和line-height高度一致来实现的

?说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td或th时,才会生效

?父元素高度确定的多行文本1

使用插入table(包括tbody、tr、td)标签,同时设置vertical-align:middle(因为td标签默认情况下就默认设置了vertical-align为middle,所以我们不需要显式地设置了)

?父元素高度确定的多行文本2

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display:table-cell,vertical-align:middle,但注意IE6、7并不支持这个样式。

深圳网站制作公司易捷网络科技主营业务:企业网站制作、网站推广优化、企业邮箱申请、域名空间购买、网站备案、论坛网站制作和企业网站维护。网站建设服务热线:13714247375
上一篇企业网站制作技术文章:    深圳网站建设中理想的人性化网站
下一篇企业网站制作技术文章:    怎样精简自己的网站代码

深圳网站制作最新案例推荐:

深圳网站制作相关文章阅读
关于我们
公司简介
人才招聘
售后服务
联系我们
网站制作套餐
基本型网站制作套餐
标准型网站制作套餐
品牌型网站制作套餐
综合型网站制作套餐
网站制作教程
网站制作常见问题
网站优化常见问题
企业邮箱常见问题
网站备案常见问题
联系方式
联系人:赵经理
电话:0755-61603557
邮箱:info@qifor.com
手机:13714247375
地址:广东.深圳宝安西乡宝源路鸿源大厦618

微信扫码咨询
深圳市易捷网络科技有限公司版权所有    备案号:粤ICP备12084881号 网赚项目网站地图XML深圳网站建设
QQ在线咨询