在一个 div 中居中三个 div答案

【问题标题】：Centering three divs inside a div在一个 div 中居中三个 div
【发布时间】：2012-07-21 22:43:55
【问题描述】：

我试图将三个 div 居中在另一个 div 中。我似乎无法让它工作。我的网站是响应式的，也许这与它有关？这是我到目前为止的代码和 CSS，非常感谢任何帮助！

我正在尝试将所有三个 div .hp-highlight 集中在 .home-highlights 内：

<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;
}

【问题讨论】：

我刚刚写了一个SO Answer 来解决你的目标。另外，请查看我的其他答案HERE 中的 pick your flavor 部分以获取更多想法。干杯！

标签： css html center

【解决方案1】：

无法在 IE7 或更低版本中运行，但可以使用。

.hp-highlight {
   display: inline-block;
   width: 280px;
   vertical-align: top;
}

如果你需要 IE7 和更低的支持，你必须使用 float。

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

在该点之后的所有 3 个项目的居中将通过使用 text-align: center on .home-highlight 或将这 3 个项目包装在另一个 div 中并将其左/右边距设置为 auto。

【讨论】：

【解决方案2】：

添加边距：自动；到你的 .hp-highlight 类

你的 CSS 应该是这样的

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

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

【讨论】：

我试过了，但它们似乎仍然没有居中。我试图让它们在 div 中集中在一条线上。你可以在这里看到结果：kompufast.com 在“我们做什么”部分，就在页脚上方。

【解决方案3】：

即使在 IE7 中也可以使用；不需要浮动。

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

【讨论】：