居中放置div块而没有宽度
当我尝试将div块“ products”居中时出现问题，因为我事先不知道div宽度。有人有解决办法吗？
更新：我的问题是我不知道要显示多少个产品，我可以有1个，2个或3个产品，如果它是一个固定数字，则可以将它们居中，因为我知道父级的宽度div，当内容动态时，我只是不知道该怎么做。
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
慕少森3回答
-
红颜莎娜
我的原始答案一直在投票，但现在我通常使用@bobince的方法来代替。.child { /* This is the item to center... */ display: inline-block;}.parent { /* ...and this is its parent container. */ text-align: center;}我出于历史目的的原始帖子：您可能想尝试这种方法。<div class="product_container"> <div class="outer-center"> <div class="product inner-center"> </div> </div> <div class="clear"/></div>匹配样式如下：.outer-center { float: right; right: 50%; position: relative;}.inner-center { float: right; right: -50%; position: relative;}.clear { clear: both;}JSFiddle这里的想法是，您要在两个div中包含要居中的内容，一个是外部的，一个是内部的。浮动两个div，以便它们的宽度自动缩小以适合您的内容。接下来，将外部div的右边缘相对放置在容器的中心。最后，您将内部div相对地相对放置，方向为其自身宽度的一半（实际上是外部div的宽度，但它们是相同的）。最终，内容将集中在其所在的任何容器中。您可能需要一个空div在年底，如果你依靠你的“产品”的内容，规格为“product_container”的高度。 -
湖上湖
带有“ display：block”（默认为div）的元素的宽度由其容器的宽度确定。您不能使块的宽度取决于其内容的宽度（缩小以适合）。（除了在CSS 2.1中为“浮动：左/右”的块，但这对居中没有用。）您可以将“ display”属性设置为“ inline-block”，以将一个块转换为一个缩小到适合的对象，该对象可以通过其父对象的text-align属性进行控制，但浏览器支持不佳。如果您愿意的话，通常可以通过使用hack（例如，参见-moz-inline-stack）来摆脱它。另一种方法是表格。当您的列的宽度实际上事先无法得知时，这可能是必要的。我无法从示例代码中真正看出您要执行的操作-那里没有明显的需要缩小到适合的块-但是，可以将一系列产品视为表格。[PS。切勿在网络上使用“ pt”作为字体大小。如果您确实需要固定大小的文本，则'px'更可靠，否则相对的单位（例如'％'）会更好。还有“清楚：两者都抄送” —错字了吗？].center{ text-align:center; }.center > div{ /* N.B. child combinators don't work in IE6 or less */ display:inline-block;} -
ABOUTYOU
大多数浏览器都支持display: table;CSS规则。这是一个在容器中居中放置div的好方法，而无需添加额外的HTML或对容器应用约束样式（例如text-align: center;，将容器中所有其他内联内容居中放置），同时保持所包含的div的动态宽度：HTML：<div class="container"> <div class="centered">This content is centered</div></div>CSS：.centered { display: table; margin: 0 auto; }.container { background-color: green;}.centered { display: table; margin: 0 auto; background-color: red;}<div class="container"> <div class="centered">This content is centered</div></div>今天执行此操作的正确方法实际上是使用flexbox规则。浏览器支持受到更多限制（CSS表支持与flexbox支持），但是此方法还允许许多其他事情，并且是这种行为的专用CSS规则：HTML：<div class="container"> <div class="centered">This content is centered</div></div>CSS：.container { display: flex; flex-direction: column; /* put this if you want to stack elements vertically */}.centered { margin: 0 auto; }.container { display: flex; flex-direction: column; /* put this if you want to stack elements vertically */ background-color: green;}.centered { margin: 0 auto; background-color: red;}<div class="container"> <div class="centered">This content is centered</div></div>
随时随地看视频慕课网APP
Html/CSS