围绕在div内的三个div

我想在另一个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; 
}

来源

2012-07-21 cbdesign

我刚刚写了一个解决你的目标的[** SO Answer **]（http://stackoverflow.com/a/11588894/1195891）。此外，请检查部分***选择你的味道***在我的其他答案[** HERE **]（http://stackoverflow.com/a/11516162/1195891）了解更多的想法。干杯! – arttronics 2012-07-21 02:14:45

不会在IE7或更低的工作，但在这里你去。如果你需要IE7和更低的支持，你将不得不使用float。

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

的那个点后所有3项定心要么是通过使用文本对齐：中心上。家里高亮或包装在另一个DIV的3并在其上设置的左/右页边距为自动。

来源

2012-07-21 02:45:23

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

补充保证金：汽车;您.HP-亮点类

这里是你的CSS应该如何

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

看到在这里工作：http://jsfiddle.net/RhMZ7/1/

来源

2012-07-21 02:12:59

我试过了，他们似乎仍然没有集中精力。我试图让他们集中在所有的div在一行。您可以在这里看到结果：http://kompufast.com/上的“我们做什么”部分，就在页脚上方。 – cbdesign 2012-07-21 02:39:58

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

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

来源

2012-07-21 14:43:55

围绕在div内的三个div

回答

相关问题