[英]How to centre align floating DIVs within a parent DIV?
我遇到一个问题,即我的父div中有三个div,它们需要居中对齐。 我不明白为什么文本的中心对齐没有做到这是通常的魔术?
我已经重新这里的问题演示小提琴
<div class="container_alt">
<div class="pricing_options_col">
<div class="pck1">pck1</div>
<div class="pck2">pck2</div>
<div class="pck3">pck3</div>
</div>
</div>
.container_alt{
max-width: 1000px;
margin: 0 auto;
}
.pricing_options{
width: 100%;
background-color: #fff;
height: auto;
overflow:auto;
text-align:center;
display:inline-block;
}
.pricing_options_col{
width: 100%;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
.pck1{
float: left;
margin: 0 auto;
width: 200px;
background-color: green;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
.pck2{
float: left;
margin: 0 auto;
width: 400px;
background-color: red;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}
.pck3{
float: left;
margin: 0 auto;
width: 200px;
background-color: pink;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
删除float: left;
从CSS到.pck1 .pck2 .pck3
更新 :我猜这是您在寻找什么:
.pricing_options_col{
width: 800px;
margin-left:auto;
margin-right:auto;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
对于.pck1
, pck2
和pck3
,删除float:left
并添加display:inline-block
。
浮动元素用于将其一直移动到一侧或另一侧(这显然与反向操作相反)。 防止“堆叠”是其副产品,但是还有其他方法可以防止元素堆叠。 默认情况下,div具有display:block
,这意味着它们将各自显示在自己的行上(“堆栈”)。 通过将其更改为display:inline-block
,它们可以在线显示。
这是一个演示 。
尝试这个。 这是因为您的parent
和child
都拥有100%
的width
.pricing_options_col{
width: 100%; <-- Remove
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.