浮动模型元素的位置排列

个回答

NJUcong: 2017-01-16 10:22:10

已采纳

浮动只针对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>

mom_227

2017-01-16 10:34:08

div{
border:2px red solid;
width:200px;
height:400px;
float:left;
text-align:center;
line-height:400px;
}

0
mom_227

2017-01-16 10:33:05

最简单的方法是在你的div样式中加入
text-align:center;
line-height:400px;
这两句代码

0
qq_鱼和马铃薯_0

2017-01-16 10:07:58

或者float:center;

0
qq_鱼和马铃薯_0

2017-01-16 10:06:33

margin:0 auto;

0
qq_潇洒达人_0

2017-01-16 10:04:20

{
text-align:center;
}

0
qq_鱼和马铃薯_0

2017-01-16 10:03:57

float默认自左向右行排列，当当前窗口页面宽度不够时，自动换行。

1