1

div左に浮いている画像を中央に配置できません。テキストの位置合わせとマージンの設定を試みました。

CSS:

.to_left_690 {
    width: 690px;
    float: left;    
}
.to_left_290 {
    width: 290px;
    float: left;
    overflow: hidden;
    text-align: center;
}
p {
    margin: 0 0 14px 0px;
    text-align: justify;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<div class="to_left_690">

<h3>Date Center</h3>

    <p>One of the biggest` data centers in Latin America with over 3000 servers took a proactive approach to monitor their electrical infrastructure. Over 4 years later they have still not had any major disruptions.</p>

<h3>Call Center</h3>

    <p>
        <img class="alignleft size-full wp-image-181" alt="baloons" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/baloons.png" width="62" height="70">During Carnival 2013 the data center air conditioning failed for a call centre company and no-one on site. Thanks to early detection and alerts sent to the standby maintenance team they were quickly able to resolve the situation and prevent a catastrophic shutdown.</p>

<h3>Facilities Management:</h3>

    <p><span>With over 1200 people working at headquarters the TJES needed a solution to maintain proper working conditions to be able to perform with the minimum of disruption. Janus Technology solutions have eliminated all problems and saved millions in lost productivity over 2 years</span>
    </p>
</div>
<div class="to_left_290">
    <img class="size-full wp-image-183 aligncenter" alt="ipad" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/ipad.png" width="290" height="368">fdsfdsfdsfds</div>

JSFIddle: http://jsfiddle.net/xLwSh/

4

4 に答える 4

2

これをフローティング div のクラスに追加します。

text-align: center;
width: 100%;

フローティングdiv のサイズはコンテンツの幅に合わせて div に固定幅を設定するため、現在は div の中央に配置されていないため、指定した 290px 内で img が中央に配置されるため、div は画面幅全体を占有しません。

于 2013-07-20T18:14:49.497 に答える
0

これはあなたが望むものですか？フィドル

次の CSS ルールを追加するだけです。

.to_left_290 {
    width: 100%; /* Instead of 290px */
    text-align: center;
}

ところで、tex-align子ではなく「コンテナ」要素でプロパティを使用する必要があります（次のCSSルールは内側を中央に配置しませんimg：

.to_left_290 > img {
   text-align: center;
}

img要素内のコンテンツを中央に配置することを伝えているためです。

于 2013-07-20T18:11:35.573 に答える
0

質問がある場合は、ページに対して画像を中央に配置することについてです。その理由は、ラッパー div.to_left_290 にwidth: 290px;. 画像は固定されたコンテナー内にラップされているためfloat:left、ページの中央に配置することは期待できません。ラッパー クラスには 100% の幅が必要です。

画像ラッパーに固定幅とフロートの配置が必要かどうかはわかりませんが、必要な場合は、画像をページの中央に配置することはできません。その部分を変えることができれば、ここでできることがあります。

画像ラッパーの幅.to_left_290を 100% に変更します。ただし、フローティング div に 100% の幅を追加すると、フローティング div が不要になります。それでもdivを左に固定幅でフローティングさせたい場合は、中央に配置することはできません。

唯一できることは、ラッパー div の固定幅を取り除くことです。このような：

.to_left_290 {
    width: 100%;
    float: left;
    overflow: hidden;
    text-align: center;
    display:block;
}

作業フィドル: http://jsfiddle.net/gjmvY/1/

于 2013-07-20T18:14:02.907 に答える
0

別の div 内に画像を設定display:inlineし、画像スタイルで使用します。

于 2013-07-20T18:02:55.513 に答える