没有宽度的div块居中

我有一个问题，当我试图中心的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>

当前回答

我找到了一个更优雅的解决方案，结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs，这不是很语义，但它只是工作…

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

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

希望能有所帮助!

2011-07-01 06:59:13

其他回答

显示:表;并将margin设置为auto

重要代码:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

不管你现在有多少个元素，它都会自动在中心对齐

代码片段中的示例:

.relatedProducts { 显示:表; margin-left:汽车; margin-right:汽车; ｝一个{ 文字修饰:没有; ｝ <div class="row relatedProducts"> <div class="homeContentTitle" style="margin: 0px auto - 35px;类似产品</div> . width: 250px"> <a href="#">test1 </a> <a href="#">test2 </a> <a href="#">test3 </a> < / div >

2014-10-30 10:40:17

在旧浏览器中工作的简单修复(但使用表格，并需要设置高度):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

2012-08-03 07:35:21

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

｝

使用span代替内部div

<div class="container_box">
   <span class="content">Hello</span>
</div>

2013-04-21 15:20:42

糟糕的修复，但它确实有效…

CSS:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

2010-03-26 10:55:57

使用css3 flexbox与justify-content:center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

2015-11-21 11:57:53

没有宽度的div块居中

推荐文章

最新文章

标签