[英]Margin auto doesnt center my image
我正在學習 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 等。但沒有任何效果
然而，最重要的是我想知道為什么她說的不起作用。 我想學習這兩件事：為什么那不起作用以及如何將我的圖像居中
謝謝！
出現此問題是因為margin:auto僅適用於具有display:block元素居中。
<p>默認有display:block （所以margin:auto有效），而<img>有display:inline或display:inline-block 。
（如果您還沒有在課堂上介紹display ，您可以使用此 CSS Tricks 鏈接找到有關它的一些有用信息）
要使用margin:auto將圖像居中，請為圖像指定display:block 。
我創建了一個演示：
在演示中，我為圖像提供了一個.myImage類，並使用該類應用了樣式（否則，所有圖像都將居中......包括社交媒體圖像）。
W3C （開發 Web 標准的人）有一個很棒的頁面討論如何將元素居中： http : //www.w3.org/Style/Examples/007/center
隨意使用我的演示進行實驗......歡迎來到俱樂部！
您可以使用img為段落設置一個class ，例如：
<p class="center-img"><img ....
然后在 CSS 中：
p.center-img{
text-align: center;
}
margin: 0 auto僅在您的元素具有寬度時才有效。 一個段落沒有。
所以你應該只為你的圖像添加一個類： <img class="center-img" ... > ，然后定義一個寬度：
.center-img {
display: block;
width: 200px;
margin: 0 auto;
}
您的圖像不會居中的原因是，當您將 CSS 中 p 元素的邊距設置為 auto 時，此設置適用於 html（段落）中的<p>元素。 現在，我知道您希望將段落元素和段落內的所有內容居中，但這里的問題是<p>元素將設置其寬度以占據給定的整個空間。 所以真的，它已經居中了，因為它填滿了整個頁面。 由於圖像是段落的內容，您可以使用“text-align: center;”來對齊它，但是您必須將此屬性應用於 CSS 中的<p>元素。 這告訴段落將其內容居中。 如果您將 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-left 和 margin-right 設置為 "auto" 通常用於將塊類型元素居中（ <p>是塊元素）。 所以這是一個正確的方法。 我上面提到的問題是<p>元素的寬度填滿了整個區域。 因此，您還必須設置您希望<p>元素具有的寬度。 您可以在 CSS 中使用“width”屬性進行設置。 使用此方法將圖像居中的問題在於，如果圖像未在<p>元素內居中，則圖像將不會在頁面中居中。 要解決此問題，您可以如上所述將“text-align:center”添加到段落中，或者您可以確保將段落寬度和圖像寬度設置為相同的值。 或者，您也可以選擇將img元素的“顯示”樣式更改為block 。
我發現定義一組簡單的CSS 居中小部件對於處理每種居中情況很有用。 （我在這里列出的不止這些，但這些解決了您的問題，我還提供了一個指向綜合 CSS 中心資源的鏈接。）
居中文本
最簡單的情況是 P 和 H 標簽居中，這不需要寬度設置來居中文本，因為每個 P（或 H）都在其邊距之間居中。 這通常會使 text-align:center 成為一個不完整的解決方案。
.center-text {
text-align:center;
}
用法示例<p class=center-text>This text is centered</p>
在活動 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（定義標准的團體）在這里。
祝你好運，快樂定心！
Bootstrap 4 margin:auto 和 text-center 不居中我的段落
[英]Bootstrap 4 margin:auto and text-center doesnt center my paragraph
CSS 背景圖像中心與margin不同：0 auto with scrollbars
[英]CSS Background Image center is not the same as margin:0 auto with scrollbars
保證金：自動和 <center> 在我的網站上無法在較小的屏幕上使用
[英]Margin: auto and <center> don't work on smaller screens on my website
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.