边距自动不会使我的图像居中答案

【问题标题】：Margin auto doesnt center my image边距自动不会使我的图像居中
【发布时间】：2026-01-05 02:55:01
【问题描述】：

我正在学习初学者 html 和 css 课程，我们正在创建一个单页简历。它有一些带有照片等的标题，然后是一些中间有照片的文本。

html 说：

<body>

        <header>
            <h1>Name Surname</h1>
            <h2>Blogger</h2>

            <p>
            <a href="http://facebook.com"><img src="http://bit.ly/1Waz24Q" alt="Facebook Icon" /></a>
            <a href="http://twitter.com"><img src="http://bit.ly/1Waz2BY" alt="Twitter Icon" /></a>
            <a href="https://plus.google.com"><img src="http://bit.ly/1Waz6lg" alt="Google Plus Icon" /></a>
            <a href="http://pinterest.com"><img src="http://bit.ly/1Waz9NH" alt="Pinterest Icon" /></a>
            </p>
        </header>

        <main>
            <h3>Background</h3>

            <p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>

            <p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>

            <p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>

            <p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>

            <h3>Filosofia</h3>

            <p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>

        </main>

    </body>

我想使图像居中。

老师/课上说，因为图片在段落之间，我们可以在css中添加：

p {
margin-left: auto;
margin-right: auto;
}

这似乎在她的工作：http://i.stack.imgur.com/mmh7J.png

但我猜这只是因为她的照片更小。在我的它根本不起作用！看：

http://i.stack.imgur.com/16Wvg.png

我已经尝试过以任何我能想到的方式将其居中：直接在 css 中添加 img margin right auto 和 margin left auto ，还有 img text-align center 等。但没有任何效果

但是，最重要的是，我想知道为什么她所说的不起作用。我想学习这两件事：为什么这不起作用以及如何使我的图像居中

谢谢！

【问题讨论】：

我已经更新了我的答案...更正了一个错字。

标签： html css

【解决方案1】：

出现此问题是因为 margin:auto 仅适用于具有 display:block 的元素。

 默认有display:block（所以margin:auto 有效），而<img> 有display:inline 或display:inline-block。

（如果你还没有在课堂上讨论过display，你可以使用this link to CSS Tricks找到一些有用的信息）

要使用margin:auto 使图像居中，请为图像指定display:block。

我创建了一个演示：

http://jsfiddle.net/gxjmx9h4/

在演示中，我给图像一个 .myImage 类并使用该类应用样式（否则，所有图像都会居中...包括社交媒体图像）。

W3C（开发网络标准的人）有一个很棒的页面来讨论如何将元素居中：http://www.w3.org/Style/Examples/007/center

随意使用我的演示进行实验...欢迎加入俱乐部！

【讨论】：

【解决方案2】：

您可以为带有img 的段落设置class，例如：

<p class="center-img"><img ....

然后在 CSS 中：

p.center-img{
    text-align: center;
}

DEMO

【讨论】：

【解决方案3】：

margin: 0 auto 仅在您的元素具有宽度时才有效。段落没有。

所以你应该给你的图片添加一个类：<img class="center-img" ... >，然后定义一个宽度：

.center-img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

【讨论】：

【解决方案4】：

我发现定义一组简单的CSS 居中小部件 对于处理每种居中情况很有用。（这里列出的内容不止于此，但这些都解决了您的问题，而且我还提供了一个指向综合 CSS 居中资源的链接。）

居中文本

最简单的情况是 P 和 H 标签居中，不需要设置宽度即可使文本居中，因为每个 P（或 H）在其边距之间居中。这通常会使 text-align :center 一个不完整的解决方案。

.center-text {
   text-align:center;
  }

使用示例 This text is centered

在活动 div 的 x% (1-100) 的 div 中居中文本

为什么这很有用？即使用户使用百分比而不是像素或 em 来调整浏览器窗格的大小，您也可以正确显示居中的文本。在下面的示例中，您可以在正文语句中使用其中的 2 个，并且您将有一个 2 列页面，每列中的内容居中，这将调整大小。 底线你必须设置宽度，它不使用边距，它不会居中。

.center-block-50 {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

块内居中和图像

注意：可以使用上面的 CSS 使图像居中，但这是使图像居中的另一种方法。

居中图像是您需要 display:block 以便居中对齐的地方，但您不需要定义宽度，因为此块方法再次使用 P 和 H 标签的边距。

.center-image {
        display: block;
        margin-left: auto;
        margin-right: auto 
}

CSS 居中的权威指南可从 w3.org（定义标准的组织）here 获得。

祝你好运，快乐居中！

【讨论】：

【解决方案5】：

您的图像不会居中的原因是，当您将 CSS 中的 p 元素的边距设置为自动时，此设置适用于 html（段落）中的  元素。现在，我知道你会期望将段落元素和段落内的所有内容居中，但这里的问题是 元素将设置它的宽度以占据给定的整个空间。真的，它已经居中了，因为它填满了整个页面。由于图像是段落的内容，您可以使用“text-align: center;”对齐它，但您必须将此属性应用于 CSS 中的  元素。这告诉段落将其内容居中。如果将 text-align center 应用于 img 元素，那么它将尝试将 img 元素的内容居中，而不是 img 元素本身。

你需要这个：

p
{
text-align:center;
}

现在，由于您是初学者，因此我将其变得更简单，但您应该注意，这将导致您的所有段落都具有居中的文本。这是因为您在执行此操作时正在设置所有“p”元素的属性。如果您希望这仅适用于图像段落，那么您将希望为其段落赋予一个类，如下所示：

<p class="imageParagraph"><img src="source" /></p>

然后在你的 css 中，你可以将该类设置为“text-align:center”，如下所示：

.imageParagraph
{
text-align:center;
}

并确保删除“text-align:center;”来自 CSS 中“p”元素的代码。在 css 中，您可以识别一个前面有句点的类，就像我在上面展示的那样。标记名称，如“p”标记，前面没有任何内容。

另外，为了学习，我想注意“margin: auto”的东西：

将margin-left 和margin-right 设置为“auto”通常用于居中块型元素（ 是块元素）。所以这是一个正确的方法。我上面提到的问题是 元素的宽度填满了整个区域。因此，您还必须设置您希望 元素具有的宽度。您可以在 CSS 中使用“width”属性进行设置。使用这种方法使图像居中的问题是，如果图像不在 元素内居中，那么您的图像将不会在页面中居中。要解决此问题，您可以如上所述在段落中添加“text-align:center”，或者您可以确保将段落宽度和图像宽度设置为相同的值。或者，您也可以选择将img元素的“显示”样式更改为block。

【讨论】：