2012-07-21 77 views
1

我想在另一個div的三個div內居中。我似乎無法得到它的工作。我的網站很敏感,也許這跟它有關係?這裏是我到目前爲止的代碼和CSS,非常感謝任何幫助!圍繞在div內的三個div

我想有三個div的中心內.home-highlights.hp-highlight

<div id="home-highlights" class="clearfix"> 

    <div class="heading"> 
     <h2><a href="http://kompufast.com/?page_id=1909" title="What We Do"><span>What We Do</span></a></h2> 
    </div> 
    <!-- /heading --> 

    <div class="hp-highlight "> 
     <img src="http://kompufast.com/wp-content/uploads/2012/06/kompufast_sales1.jpg" title="Sales" class="hp-highlight-img" /> 
     <h3><a href="http://kompufast.com/?services=safe-computing" title="Sales" target="_self">Sales</a></h3> 
     <p>KompuFAST+ is the right company to help you address your need for all kind of consumer technology products.</p> 
    </div> 
    <!-- /hp-highlight --> 

    <div class="hp-highlight "> 
     <img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_order1.jpg" title="Order" class="hp-highlight-img" /> 
     <h3><a href="http://kompufast.com/?services=social-media" title="Order" target="_self">Order</a></h3> 
     <p>KompuFAST-Order facilitates the ordering of products, without a fee for special order.</p> 
    </div> 
    <!-- /hp-highlight --> 

    <div class="hp-highlight highlight-third "> 
     <img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_fix1.jpg" title="Fix" class="hp-highlight-img" /> 
     <h3><a href="http://kompufast.com/?services=shared-hosting " title="Fix" target="_self">Fix</a></h3> 
     <p>KompuFAST+ has a team of dedicated repair technicians ready to diagnose your computer for all sorts of problems.</p> 
    </div> 

這是我一直在努力的CSS:

.home-highlights { 
    margin-right:auto; 
    margin-left:auto; 
    width: 100%; 
} 
.hp-highlight { 
    width: 280px; 
} 
+0

我剛剛寫了一個解決你的目標的[** SO Answer **](http://stackoverflow.com/a/11588894/1195891)。此外,請檢查部分***選擇你的味道***在我的其他答案[** HERE **](http://stackoverflow.com/a/11516162/1195891)瞭解更多的想法。乾杯! – arttronics 2012-07-21 02:14:45

回答

1

不會在IE7或更低的工作,但在這裏你去。如果你需要IE7和更低的支持,你將不得不使用float。

.hp-highlight { 
    width: 280px; 
    float: left; 
} 

的那個點後所有3項定心要麼是通過使用文本對齊:中心上。家裏高亮或包裝在另一個DIV的3並在其上設置的左/右頁邊距爲自動。

+0

這根本不是真的。 – 2012-07-21 14:39:03

0

補充保證金:汽車;您.HP-亮點類

這裏是你的CSS應該如何

.hp-highlight { 
    margin:auto; 
    width: 280px; 
} 

看到在這裏工作:http://jsfiddle.net/RhMZ7/1/

+0

我試過了,他們似乎仍然沒有集中精力。我試圖讓他們集中在所有的div在一行。您可以在這裏看到結果:http://kompufast.com/上的「我們做什麼」部分,就在頁腳上方。 – cbdesign 2012-07-21 02:39:58

0

即使在IE7中也能正常工作;不需要浮動。

.home-highlights {font-size: 0; text-align: center;} 
.hp-highlight { 
    display: inline-block; 
    *display: inline; 
    vertical-align: top; 
    width: 280px; 
    zoom: 1; 
}