この問題を回避するのは少し混乱します。
親DIVと3つ以上の子DIVがあります。
親DIVは中央揃えで、子DIVは左にフローティングである必要がありますが、中央揃えである必要があります。
CSSには、
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
質問する
50867 次
4 に答える
40
要素を中央に水平に配置する場合は、要素をフロートさせないでください。
親のスタイルを変更して、表示方法を変更inline-blockし、中央に配置します。text-align
#parent {
text-align:center;
height:450px;
width:75%;
border:1px solid blue;
}
.center {
display:inline-block;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}<div id="parent">
<div id="child1" class="center"></div><!--
--><div id="child2" class="center"></div><!--
--><div id="child3" class="center"></div>
</div>お子様の間に（つまり、HTML内の）空白や改行を入れないようにする<div>か、コメントアウトしてください。これらがインライン要素であるため、この空白はスペースとして解釈されます。
于 2012-11-28T10:34:36.830 に答える
4
#parent{
display: flex;
justify-content:center;
flex-direction:row; /*default value is row*/
height:350px;
width:75%;
border:1px solid blue;
padding: 10px 0;/* not mandatory */
}
.center {
height:250px;
width:15%;
margin:5px;
border: 1px solid black;
}<div id="parent">
<div id="child1" class="center">
</div>
<div id="child2" class="center">
</div>
<div id="child3" class="center">
</div>
</div>Flexは、特定のことを簡単に達成するのに役立ちます。
于 2020-10-07T02:17:04.657 に答える
2
フロートが適用されている要素には、自動マージンは適用されません。フロートを取り外すと、始めることができます...
于 2012-11-28T10:33:35.173 に答える
0
水平方向と垂直方向の中央に配置
top垂直方向の中央に使用し、calc動的にtop値を計算しています。トップはで動作しposition - relativeます。
水平方向の中央text-align:centerに親と子で使用します。display:inline-block
.parent {
height:400px;
width:400px;
position:absolute;
border:1px solid black;
text-align:center;
}
.child {
position:relative;
height:70px;
width:70px;
border:1px solid red;
top:calc(50% - 70px/2);
display:inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</body>
</html>于 2021-05-17T12:52:50.510 に答える