css居中

css设置内容居中,css div居中两种居中方法教程,让您轻松掌握使用css居中方法——内容居中与div布局居中。

css设置内容居中,css div居中两种居中方法教程,让您轻松掌握使用css居中方法,包含内容居中与布局居中。

一、内容居中

1、使用css居中样式英文词

text-align:center

2、body内容居中代码

body{ text-align:center}

3、p、div内的内容居中代码

p,div{ text-align:center}

4、class或id内内容居中代码

#abc{ text-align:center}
.head{ text-align:center}

设置id=abc对象内容内容居中,设置class=head对象内的内容居中。

5、设置居中和居左

css代码:

#abc,.head{ text-align:center}
.box{ text-align:left}

HTML代码

  1. <div class="head">我居中了</div> 
  2. <div id="abc">我居中了</div> 
  3. <div class="box">我居左了</div> 


css内容居中、居左实例截图

二、div水平居中,div布局居中

div居中不能对div设置float,一般设置margin:0 auto即可。

示例css代码:

.jz{ margin:0 auto; border:1px solid #F00; width:300px}

HTML代码:

<div class="jz">我这个div居中了</div>

效果截图

这篇教程为大家介绍css居中的内容和div布局居中。

 

更新