浮動(dòng)模型元素的位置排列
怎樣將浮動(dòng)模型的元素居中顯示？
qq_月下梭影_0
2017-01-16
7 回答
舉報(bào)
0/150
提交
取消
2017-01-16
浮動(dòng)只針對(duì)html標(biāo)簽設(shè)置靠左靠右浮動(dòng)樣式,float浮動(dòng)樣式?jīng)]有靠中（浮動(dòng)居中）的樣式。你如果想讓兩個(gè)div居中可以試試在這兩個(gè)外面再套一個(gè)div對(duì)這個(gè)div運(yùn)用層模型定位，再使用margin慢慢調(diào)整。
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>浮動(dòng)模型</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
最簡(jiǎn)單的方法是在你的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默認(rèn)自左向右行排列，當(dāng)當(dāng)前窗口頁(yè)面寬度不夠時(shí)，自動(dòng)換行。