没有宽度的div块居中

Question

当我尝试将div块"产品"居中时,我遇到了问题,因为我事先并不知道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>

Answer 1

2015年2月27日更新:我的原始答案一直在投票,但现在我通常使用@ 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"的高度.

Answer 2

带有'display:block'的元素(默认情况下为div)的宽度由其容器的宽度决定.您不能使块的宽度取决于其内容的宽度(缩小到适合).

(除了CSS 2.1中'浮动:左/右'的块,但这对于居中没有用.)

您可以将'display'属性设置为'inline-block',将块转换为可由其父级text-align属性控制的缩小到适合对象,但浏览器支持不稳定.如果你想这样,你可以通过使用黑客(例如,参见-moz-inline-stack)来逃避它.

另一种方法是表格.如果您的列的宽度实际上无法事先知道,则可能需要这样做.我无法从示例代码中确切地告诉您要做什么 - 在那里没有什么需要缩小到适合的块 - 但是产品列表可能被视为表格.

[PS.永远不要在网络上使用'pt'来表示字体大小.如果你真的需要固定大小的文本,'px'会更可靠,否则像'%'这样的相对单位会更好.并且"明确:ccc两者" - 一个错字？]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

的jsfiddle

Answer 3

大多数浏览器都支持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>

更新(2015-03-09):

今天这样做的正确方法实际上是使用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>

Answer 4

皮肤那种猫的六种方法:

按钮一:任何类型display: block都将采用完整的父母宽度.(除非与父母float或display: flex父母合并).真正.不好的例子.

按钮2:前进display: inline-block将导致自动(而不是完整)宽度.然后,您可以text-align: center 在包装块上居中使用.可能是最简单,最广泛兼容的,甚至是"老式"浏览器......

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

按钮3: 无需在包装上放任何东西.所以也许这是最优雅的解决方案.也垂直工作.(浏览器支持transstlate 这些天足够好(≥IE9) ......).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

顺便说一句:这也是垂直定位未知高度块的好方法(与绝对定位有关).

按钮4: 绝对定位.只需确保在包装器中保留足够的高度,因为没有其他人(无论是clearfix还是隐含......)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

按钮5: 浮动(它还将块级元素带到动态宽度)和相对移位.虽然我从来没有在野外见过这个.也许有缺点......

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

更新: 按钮6: 现在,你也可以使用flex-box.请注意,这些样式适用于居中对象的包装器.

.wrapSix
  display: flex
  justify-content: center

→完整源代码(手写笔语法)

Answer 5

我找到了一个更优雅的解决方案,结合"内联块"以避免使用浮动和hacky clear:两者.它仍然需要嵌套的div,这不是非常语义,但它只是工作...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能帮助到你!

Answer 6

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

如果目标元素是绝对定位的，您可以通过将其向一个方向 ( left: 50%)移动 50%然后向相反方向 ( )移动 50% 来将其居中transform:translateX(-50%)。这无需定义目标元素的宽度（或使用width:auto）。父元素的位置可以是静态的、绝对的、相对的或固定的。

Answer 7

将此 css 添加到您的product_container 类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;