gpt4 book ai didi

html - 如何使同样具有最大宽度的流体 div 居中?

转载 作者:太空宇宙 更新时间:2023-11-04 12:43:49 25 4
gpt4 key购买 nike

考虑以下设置:

CSS:

#container {
position: relative;
width: 95%;
margin: 0 auto;
height: 100%;
}

.parent {
position: relative;
width: 100%;
height: auto;
float: left;
clear: left;
}

.child {
float: left;
width: 50%;
max-width: 200px;
}

HTML:

<body>
<div id="container">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<body>

如果窗口的宽度大于 400px,.child 元素将不会居中而是靠左。

我无法提前知道 .child 元素的数量(但每个父元素中的数字在所有 .parent 元素中始终相同)。如果有更多,我会使用 JS 来计算新的百分比并将其分配给它们的宽度,以便它们仍然保持响应(因此,如果我有 2 个子元素,它们的宽度将为 50%,如果我有四个,它们的宽度将为 25% 等。) .

有没有办法让 .child 元素以上述设置为中心?

提前感谢您的帮助。 :-)

最佳答案

text-align: center添加到.parent,移除float并更改display属性对 child 进行 inline-block

.parent {
position: relative;
width: 100%;
height: auto;
float: left;
clear: left;
text-align: center;
}

.child {
display: inline-block;
width: 50%;
max-width: 200px;
}

如果元素之间的空间有问题,请拆分子 div 上的结束标记:

<div class="child"></div
><div class="child"></div>

代码笔:http://codepen.io/erquhart/pen/ukHco

关于html - 如何使同样具有最大宽度的流体 div 居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26666051/

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