塊級元素居中問題 定寬塊級元素水平居中 不定寬塊級元素水平居中 不定寬塊級元素水平居中 不定寬塊級元素水平居中 ... ...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>塊級元素居中問題</title> <style type="text/css"> .one{ width:100px; margin:0 auto; background:#ff6699; } .two{ margin:0 auto; background:#ff3366; } .t-parent{ text-align:center; } .three{ display:inline; background:#3333ff; } .f-parent{ position:relative; float:left; left:50%; } .four{ position:relative; left:-50%; background:#000033; } </style> </head> <body> <!--給寬度 直接設置margin:0 auto;--> <div class="one">定寬塊級元素水平居中</div> <!--table 標簽是根據裡面的文本來撐開的 有文字就有寬度 在設置 margin:0 auto;--> <table class="two"> <tr> <td> <div >不定寬塊級元素水平居中</div></td> </tr> </table> <!--父元素 設置 text-align:center 子元素 設置為inline--> <div class="t-parent"> <div class="three">不定寬塊級元素水平居中</div> </div> <!-- 父元素設置 position:relative; float:left; left:50%; 子元素設置 position:absolute; float:-50%; --> <div class="f-parent"> <div class="four">不定寬塊級元素水平居中</div> </div> </body> </html>
