0

我正在尝试将图像集中在我的博客上。

​下面的代码示例说明了博客上使用的 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/

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;标签中添加一个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 回答