各种居中对齐
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>