1

3 つの div を別の div の中央に配置しようとしています。私はそれを機能させることができないようです。私のサイトはレスポンシブですが、これは何か関係があるのでしょうか? これが私がこれまでに持っているコードとCSSです。どんな助けも大歓迎です!

私は3つの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;
}
4

3 に答える 3

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に設定します。

于 2012-07-21T02:45:23.780 に答える
0

マージンを追加:自動; .hp-highlight クラスに

これがあなたのcssのあり方です

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

ここでの作業を参照してください: http://jsfiddle.net/RhMZ7/1/

于 2012-07-21T02:12:59.113 に答える
0

これは 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-21T14:43:55.307 に答える