0

ブログの中央に画像を配置しようとしています。

以下のコード例は、ブログで使用されているHTML構造を示しています。

残念ながら、複数の画像では機能せず、1つだけです。複数の画像を左揃えにします。すべて中央に配置します。HTML構造に何か（クラス、スパンなど）を追加または削除できません。解決策を知っている幸せな魂はいますか？私はJavascriptをまったく使用したくありません。可能であれば、純粋なCSSを使用します。

HTML

<!DOCTYPE html> 
<html>
<head>
    <title>Centering images</title>
</head>
<body>
    <div id="container">
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p><img src="http://media-cache-ec2.pinterest.com/upload/150166968795197906_SMIa24Vz_f.jpg"></p>
            <p><img src="http://media-cache-ec8.pinterest.com/upload/192528952790461003_uuI48luk_f.jpg"></p>
            <p><img src="http://media-cache-ec7.pinterest.com/upload/7318418115018093_x77QiYNG_f.jpg"></p>
            <p><img src="http://media-cache-ec4.pinterest.com/upload/6262886952319256_ke0nvUiH_f.jpg"></p>
            <p><img src="http://media-cache-ec9.pinterest.com/upload/59883870015686497_9yB48yWs_f.jpg"></p>            
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </div>
</body>
</html>​

そしてここにCSSがあります：

CSS

#container {
    width: 100%; 
    text-align: left;    
}

p {    
    max-width: 200px; 
    margin: 0 auto;
}

p > img {
    margin: 0 -100%;
}

結果を示す上記のサンプルコードへのリンクは次のとおりです。http： //jsfiddle.net/ttJGk/37/

4

4 に答える 4

2

text-align: center;画像を含む段落に が必要なだけです。

この CSS ルールを追加しました。

p.image-container {
    text-align:center;
}

そして、このクラスを画像付きの段落に:

<p class="image-container">...</p>

私の更新された JSFiddle を参照してください: http://jsfiddle.net/ttJGk/41/。

これは、画像をフルサイズにすること、または少なくとも 200pxpタグ内に収める必要があるという制限がないことを前提としています。これらのタグに収まるようにしたい場合はmax-width: inherit;、タグに a を追加するだけimgです。を削除することもできますmargin: 0 -100%;。

このソリューションは、HTML にクラスをまったく追加できない場合にも機能します。更新された JSFiddle を参照してください: http://jsfiddle.net/ttJGk/45/。

于 2012-06-11T12:26:30.967 に答える
1

このようにcssクラスを更新してみてください

p > img {
margin: 0 auto;
width:100%;}
于 2012-06-11T12:29:29.037 に答える
0

記事の最初と最後にこのテキスト パラグラフの構造が常にある場合は、すべてを中央揃えにし、:first-childおよび:last-child疑似クラスを使用してテキストを左揃えにすることができます。

#container {
    width: 100%;
    text-align: center;    
}


article p:first-child, article p:last-child{
    text-align: left;
}

JSFiddle の例を参照してください

于 2012-06-11T12:51:08.220 に答える
0 
p img {margin:0 auto; display:block;}

これにより、すべての画像が段落の中央に配置されます。

于 2012-11-30T13:32:39.190 に答える