gpt4 book ai didi

css - 父 DIV 中有 2 个 float DIV 和 1 个居中 DIV

转载 作者:可可西里 更新时间:2023-11-01 13:11:39 25 4
gpt4 key购买 nike

我有一个父 DIV 和 3 个子 DIV。我需要向左浮动一个 DIV,向右浮动另一个 DIV,并将第三个 DIV 居中。

父级宽度为 100%,因此不固定。

我尝试了以下但 DIV 没有居中:

<html>

<head></head>

<body>

<div style="width:100%;border:1px solid #000000;height:200px;">

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>

</div>

</body>

</html>

我创建了一个 fiddle 供您测试:http://jsfiddle.net/swS5x/

谢谢

最佳答案

好吧,解决方案之一可能是简单地为#parent 添加text-align:center; 并在#center 上删除float:left;并添加 display:inline-block;

#parent {
width:100%;
border:1px solid #000000;
height:200px;
text-align:center;
}
#center {
width:50px;
height:50px;
border:1px solid #000000;
margin-top:75px;
margin-right:auto;
margin-left:auto;
display:inline-block;
}

显示:内联 block ;使元素的行为很像图像,您可以将其置于容器的中心。

http://jsfiddle.net/swS5x/2/

关于css - 父 DIV 中有 2 个 float DIV 和 1 个居中 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19964168/

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