當我嘗試將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 回答
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
我的原始答案一直在投票，但現在我通常使用@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”的高度。
湖上湖
TA貢獻2003條經驗 獲得超2個贊
帶有“ 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
TA貢獻1812條經驗 獲得超5個贊
大多數瀏覽器都支持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>
- 3 回答
- 0 關注
- 766 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消