码迷,mamicode.com
首页 > 其他好文 > 详细

各种居中对齐

时间:2016-11-26 13:53:09      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:位置   white   对齐   display   style   ring   top   code   填充   

1.div居中对齐 【HTML】

<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
</style>
 
 
<div id="all">
<div>
 
</div></div>

2.div中文字居中 【HTML】

<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px;
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字颜色 */
}
</style>
 
 
<div id="all">
<div id="string">center<div>
<div>
 
</div></div></div></div>

3 div图片居中 【HTML】

<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px; /* 必须制定宽度 */
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字颜色 */
}
#image{
    margin:0px auto;
    width:300px; /* 必须制定宽度 */
    background-color:white;
    text-align:center; /* 图像居中 */
    padding-top:20px; /* 图像上填充 */
    padding-bottom:20px; /* 图像下填充 */
}
</style>
 
 
<div id="all">
<div id="string">center
<div id="image"><img src="" style="display: none;"><img alt="加载中..." title="图片加载中..." src="http://statics.2cto.com/images/s_nopic.gif">
 
 
 
</div></div></div>

4.表格内容居中 【HTML】

<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
/* 设置边框 */
table, th, td{
    border: 1px solid black;
}
/* 设置table位置 */
table{
    margin:0px auto; /* 效果等同 <tabel align="center">*/
    width:80% /* 必须制定宽度 */
}
/* 单元格对齐 */
td{
    text-align:center;
}
</style>
 
 
<div id="all">
<table>
<tbody>
<tr height="50px"><td>文字居中</td></tr>
<tr height="50px"><td><img src="" style="display: none;"><img alt="加载中..." title="图片加载中..." src="http://statics.2cto.com/images/s_nopic.gif"></td></tr>
</tbody>
</table>
 
 
</div>

 

各种居中对齐

标签:位置   white   对齐   display   style   ring   top   code   填充   

原文地址:http://www.cnblogs.com/pengyunjing/p/6103818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!