浮动模型元素的位置排列-慕课网

首页课程实战体系课手记专栏慕课教程

浮动模型元素的位置排列

来源：13-4 起飞咯 - 浮动模型

qq_月下梭影_0

2017-01-16 09:24

怎样将浮动模型的元素居中显示？

写回答关注

7回答

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>

1 0

qq_月下梭...

非常感谢！谢谢你的回答，很棒！

2017-01-16 11:50:44

共 1 条回复 >

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;
}

1 0

qq_月下梭...

我要的是浮动元素的居中，既两个方框在网页中间显示。谢谢你的解答！

2017-01-16 11:46:43

共 1 条回复 >
mom_227

2017-01-16 10:33:05

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

0 0
qq_鱼和马铃薯_0

2017-01-16 10:07:58

或者float:center;

0 0
qq_鱼和马铃薯_0

2017-01-16 10:06:33

margin:0 auto;

0 0
qq_潇洒达人_0

2017-01-16 10:04:20

{
text-align:center;
}

1 0

qq_鱼和马...

你这个是文字的居中，文字在浮动元素内，不是浮动元素的居中。

2017-01-16 10:09:06

共 1 条回复 >
qq_鱼和马铃薯_0

2017-01-16 10:03:57

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

0 1

初识HTML(5)+CSS(3)

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1230042 学习 · 19084 问题

查看课程

相似问题

浮动模型位置排列

回答 1

块状元素的浮动模型

回答 1

块状元素使用display:inline 也是横向排列,那这时候属于流动模型还是浮动模型?

回答 2

浮动模型和内联块状元素的区别

回答 1

浮动模型和内联块状元素区别

回答 2

打开慕课网App查看更多内容