0

インライン (同じ行に表示される) が、左揃えのテキストのブロック内で画像を中央に配置したい。

こちらをご覧ください: http://jsfiddle.net/2LHfA/4/

.extra {
display:table;
margin: 0 auto;
text-align: left;
}

.extra img {
display: inline;
?????
}

CSSだけで（HTMLをいじらずに）これを行うことはできますか？

「text-align:center;」を試してみました および「マージン: 0 auto;」無駄に。

前もって感謝します！

4

1 に答える 1

2

HTML を編集できる場合:
画像を別の div 内にラップし、text-align プロパティを使用してその内容を中央揃えにします。

HTML:

<div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
     <div class="fish">
        <img src=http://i.imgur.com/innn2oL.gif />
        <img src=http://i.imgur.com/zRYKaCM.jpg />
    </div>
</div>

CSS:

 .fish{
    width:100%;
    text-align:center;
 }


HTML を編集できない場合:
次の 2 つのオプションがあります。

  1. Javascript を介して親 div (.fish) を注入し、上記の方法を使用することを検討してください。

  2. 以下のように、nth-of-type* 疑似クラスを介して画像を中央に向かって押すために、最初の画像にいくらかの左マージンを与えます。これは正確なセンタリングではなく、回避策です。

    .extra img:nth-of-type(1){
     margin-left:20%;
 }

*nth-of-type はすべてのブラウザーでサポートされているわけではありません。

于 2013-09-11T17:13:49.630 に答える