gpt4 book ai didi

html - 左、右和居中对齐父 Div 容器下的子 div

转载 作者:技术小花猫 更新时间:2023-10-29 12:00:34 24 4
gpt4 key购买 nike

我想根据父 Div 的类向左、向右或居中对齐子 Div。

我做了以下,

.container{
border:1px solid;
padding:1px;
width:100%;
margin:1px;
}

.left-item{
float:left;
padding:auto;
margin:1px;
}

.center-item{
padding:auto;
margin:1px;
}

.right-item{
float:right;
padding:auto;
margin:1px;
}
<div class="container">        
<button class="left-item">Left</button> <button class="center-item">Center 2</button> <button class="right-item">Right</button> <button class="left-item">Left</button> <button class="right-item">Right</button> <button class="center-item">Center 1</button> <button class="center-item">Center 3</button>
</div>

我无法对齐 child Divs 以父 Divs 为中心。谁能帮我这个?

最佳答案

将盒子分为左、中、右的更简单方法是使用 CSS flexbox。通过将左、中和右包裹在一个新的 div 中,并使用 display:flex 将您的容器变成一个 flexbox,您可以用更少的代码来模拟这种行为。

.container {
border: 1px solid;
padding: 1px;
width: 100%;
margin: 1px;
display:flex;
justify-content:space-between;
}
<div class="container">
<div>
<button>Left</button>
<button>Left</button>
</div>
<div>
<button>Center 2</button>
<button>Center 1</button>
<button>Center 3</button>
</div>
<div>
<button>Right</button>
<button>Right</button>
</div>
</div>

关于html - 左、右和居中对齐父 Div 容器下的子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42222286/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com