标签:
<!DOCTYPE html> <html> <head> <style> #all{ margin:0px auto; width:500px; /* 必须制定宽度 */ height:200px; background-color:blue; } </style> </head> <body> <div id="all"> <div> </body> </html>
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="all"> <div id="string">center<div> <div> </body> </html>
text-align:center使得
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="all"> <div id="string">center</div> <div id="image"><img src="loader.gif"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> #all{ margin:0px auto; width:500px; /* 必须制定宽度 */ height:200px; background-color:blue; } </style> </head> <body> <div id="all"> <!-- 表格在父窗口中居中 --> <table width="80%" align="center" border="1"> <tbody> <!-- 单元格居中 --> <tr height="50px"><td align="center">文字居中</td></tr> <tr height="50px"><td align="center"><img src="loader.gif"></td></tr> </tbody> </table> </div> </body> </html>
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="all"> <table> <tbody> <tr height="50px"><td>文字居中</td></tr> <tr height="50px"><td><img src="loader.gif"></td></tr> </tbody> </table> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/lcchuguo/p/5096767.html