您的位置:CSS5 > CSS技巧 >

 

css 居中 有哪些CSS居中样式

 

div css 居中有哪些形式与居中代码

HTML布局中会碰到各种各样居中样式设置,比如内容居中水平居中)、内容垂直居中布局居中等常见CSS居中需要设置,这里CSS5介绍各种居中实例与居中代码。

一、CSS内容居中

内容水平居中CSS属性代码:text-align:center
只要需要水平居中的对象设置text-align:center即可实现居中。但通常情况下CSS开发前需要对CSS初始化就会设置text-align:center内容居中样式。

css设置内容居中(水平居中)代码示例:

.t-center{text-align:center}

HTML对应内容:

<div class="t-center">内容居中</div>

css居中示例截图

内容居中成功设置截图
内容居中成功设置截图

二、内容垂直居中

垂直居中,一般在对象中一排文字垂直居中,使用CSS属性样式行高样式line-height来实现。

重要是对象高度多少,line-height行高值就设置多,即可实现内容垂直居中。

css内容垂直居中实例CSS代码:

.exp{ border:1px solid #F00; height:80px; line-height:80px}

为了看见垂直居中效果,对实例对象设置边框。

html代码

<p class="exp">内容在80px高度对象中垂直居中</p>

截图:

css垂直居中设置实例
css垂直居中设置实例

三、css布局居中(水平)

布局居中是比较重要的DIV CSS网页布局。因为没有一个专一的属性来专门定义布局居中。一般使用margin:0 auto来实现布局居中。

需要注意时,为了兼容好需要对body设置text-align:center内容居中,需要布局居中的盒子对象设置margin:0 auto即可实现布局居中,同时不能设置float样式比如(float:leftfloat:right都不能设置)。

css布局居中实例CSS代码

body{ text-align:center}
.ct{ border:1px solid #F00; width:300px; margin:0 auto}

同样为了看见布局水平居中效果,对实例对象设置边框。

HTML代码

<div class="ct">此DIV布局水平居中</div>

布局居中截图

CSS成功设置布局居中
CSS成功设置布局居中

居中相关文章教程:
1、css图片水平居中
2、text-align 垂直居中
3、div 居中
4、div内图片居中

标签(Tag): 居中
本文分享URL地址:http://css5.com.cn/jiqiao/1176.shtml

更多

上一页: 上一篇:css布局表格样式
下一页: 下一篇:css设置中文字体

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2016-12-15     点击:
原创:CSS5     来源网址:http://css5.com.cn/jiqiao/1176.shtml
本文css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!