浮動模型元素的位置排列
怎樣將浮動模型的元素居中顯示？
qq_月下梭影_0
2017-01-16
7 回答
舉報
0/150
提交
取消
2017-01-16
舉報
2017-01-16
浮動只針對html標簽設置靠左靠右浮動樣式,float浮動樣式沒有靠中（浮動居中）的樣式。你如果想讓兩個div居中可以試試在這兩個外面再套一個div對這個div運用層模型定位，再使用margin慢慢調整。
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>浮動模型</title> ???? <style?type="text/css"> div{ ?border:2px?red?solid; ????width:200px; ????height:400px; ????float:left; ????margin:8px?44px; } span{ ????border:2px?blue?solid; ????width:600px; ????height:420px; ????position:absolute; ????margin-left:320px; ????text-align:center; } </style> ???? </head> ???? <body> ????<span> ????????<div?id="div1">欄目1</div> ????????<div?id="div2">欄目2</div> ????</span> </body> </html>2017-01-16
div{
border:2px red solid;
? ? width:200px;
? ? height:400px;
float:left;
text-align:center;
line-height:400px;
}
2017-01-16
最簡單的方法是在你的div樣式中加入
text-align:center;
line-height:400px;
這兩句代碼
2017-01-16
或者float:center;
2017-01-16
margin:0 auto;
2017-01-16
{
? ?text-align:center;
}
2017-01-16
float默認自左向右行排列，當當前窗口頁面寬度不夠時，自動換行。