4

で囲まれた画像を中央揃えにしようとしていますが、<span>うまくいきません。CSS と HTML を jsfiddle にアップロードしました: http://jsfiddle.net/7nHhu/1/

「ブロック」スタイルで画像をコンテンツの中央に配置しようとしています（つまり、上下のすべてのテキストで、左右に折り返されていません）

どんな助けでも大歓迎です。

.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}

<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>​
4

5 に答える 5

3

画像ラッパー ブロック レベル要素とtext-align:center;それを作成するだけです。

フィドル

または、必要に応じて別の要素でラップします。

フィドル

于 2012-07-06T22:54:43.493 に答える
0

要件を考慮して、.imgframe要素をインラインに保ち、囲んでいる要素の幅全体を占有しないようにし、マークアップにラッピング要素を追加せずに機能するようにするには、次のようにします。

body {
    text-align: center;
}

body p {
    text-align: left;
}

JS フィドルのデモ。

Fiddle の要素を特定のターゲット可能な要素でラップした場合、これはおそらくあまり邪魔になりません。ではなく、上記の方法では、に含まれるすべての要素に対してbodyをリセットする必要があります。したがって、個人的には、次のように使用します。text-alignbody

<div id="contentWrapper">
    <p>...</p>
    <span class="imgframe">
        <img src="..." />
    </span>
    <p>...</p>
</div>

と：

#contentWrapper {
    text-align: center;
}

#contentWrapper p {
    text-align: left;
}

後片付けに必要な作業量を最小限に抑えるためです。

于 2012-07-06T22:59:50.433 に答える
0

.imgframe に width: 100%; を追加します。

于 2012-07-06T22:52:23.223 に答える