這篇文章主要介紹了使用CSS居中浮動元素的方法介紹,是CSS入門學習中的基礎知識,需要的朋友可以參考下
方法一
設定容器的浮動方式為絕對定位
然後確定容器的寬高例如寬500 高300 的層
然後設定層的外邊距
p{ width:500px; height:300px; margin:-150px 0 0 -250px; position:absolute; left:50%; top:50%; background-color:#000; }
#方法二
父元素和子元素同時左浮動,然後父元素相對左移動50%,再然後子元素相對右移動50%,或子元素相對左移動- 50%也就可以了。
<!DOCTYPE html><html><head> <title>Demo</title> <meta charset="utf-8"/> <style type="text/css"> .p{ position:relative; left:50%; float:left; } .c{ position:relative; float:left; rightright:50%; } </style></head><body> <p class="p"> <h1 class="c">Test Float Element Center</h1> </p> </body> </html>
以上是使用CSS居中浮動元素的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!