我想讓兩個(gè)div并列顯示然后居中，為什么我設(shè)置了margin:10px auto卻還是不能居中？
我想讓兩個(gè)div并列顯示然后居中，為什么我設(shè)置了margin:10px auto卻還是不能居中？
慕仰0359230
2020-04-10
5 回答
舉報(bào)
0/150
提交
取消
2020-06-23
body{
? ? ? ? display:flex;
? ? ? ? justify-content: center;
? ? }
查了下，給父元素設(shè)置FLEX布局居中可以
2020-05-26
因?yàn)樵O(shè)置float后元素自動(dòng)變?yōu)閕nline-block，不管之前是什么類型，會(huì)沒有margin
2020-05-25
10px 的 margin 是有顯示的，只是不明顯，你可以設(shè)置 200px 試試看。
對(duì)于 margin: 0 auto; 的使用，是有限制條件的，一個(gè)就是 div 得設(shè)置寬度，但是設(shè)置寬度之后又居中不了。
我的猜想是可能與 float 有關(guān)，我取消float之后，兩個(gè) div 是能居中顯示的，不過就沒有并列居中的效果了。
2020-04-24
現(xiàn)在整個(gè)body沒有高度，目前我所學(xué)到的使用一個(gè)外層div，設(shè)置一下寬高包裹一下就可以居中了
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>浮動(dòng)模型</title>
? ? <style type="text/css">
.div{
position: absolute;
width: 408px;
height: 400px;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin:auto;
}
? ? #div1,#div2{
? ? border: 2px red solid;
? ? ? ? width: 200px;
? ? ? ? height: 400px;
float:left;
? ? }
? ? </style>
</head>
<body>
<div class="div">
? ? <div id="div1">欄目1</div>
? ? <div id="div2">欄目2</div>
? ? </div>
</body>
</html>
2020-04-10
使用了float模型，兩個(gè)div會(huì)顯示在同一行，所以其實(shí)已經(jīng)居中了吧？（把兩個(gè)div看成一個(gè)整體）