Question

我正在尝试将图片放在我的博客上。

下面的代码示例说明了博客上使用的HTML结构。

不幸的是，它不适用于多个图像，只有一个。多个图像左对齐，我希望它们全部居中。我无法在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/

Answer 1

您只需要在包含图片的段落上text-align: center;。

我添加了这个CSS规则：

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

这个类带有图片的段落：

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

请参阅我更新的JSFiddle：http://jsfiddle.net/ttJGk/41/。

这假设您希望图像为完整大小，或者至少没有限制它们必须适合200px p标记。如果您希望它们适合这些标记，则只需向max-width: inherit;标记添加img即可。您也可以删除margin: 0 -100%;。

如果您绝对不能向HTML添加任何类，此解决方案也将起作用。请参阅更新的JSFiddle：http://jsfiddle.net/ttJGk/45/。

Answer 2

尝试像这样更新你的css类

p > img {
margin: 0 auto;
width:100%;}

Answer 3

如果您将始终在文章中首先使用文本段落的这种结构，那么您可以将所有内容对齐并使用:first-child和:last-child伪类来左对齐文本。

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


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

请参阅JSFiddle example

Answer 4

p img {margin:0 auto; display:block;}

这会将所有图像集中在段落中。

使用最大宽度的段落中居图像

HTML

CSS

4 个答案: