Margin auto doesnt center my image
Question
I am taking a beginner html and css class and we are creating a one page resume. It has some header with photo, etc. and then some text with a photograph in the middle.
The html says:
<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>
And I want to center the image.
The teacher/lesson says that since image is between a parragraph, we can just add in the css:
p {
margin-left: auto;
margin-right: auto;
}
It seems to work in hers: http://i.stack.imgur.com/mmh7J.png
But I am guessing that's just because her photo is smaller. In my it doesn't work at all! Look:
http://i.stack.imgur.com/16Wvg.png
I have tried to center it in anyway I could come up with: adding directly in the css img margin right auto and margin left auto, also img text-align center, etc. But nothing works
However, most of all I wanna know why what she says it doesn't work. I want to learn both things: why that doesn't work and how to center then my image
Thanks!
5 answers
solution1
2 2015-09-19 19:46:50
The issue is occuring because margin:auto only works to center elements if they have display:block .
<p> have display:block by default (so margin:auto works), whereas <img> has a display:inline or display:inline-block .
(In case you haven't covered display in class yet, you can find some useful info on it using this link to CSS Tricks )
To centre your image using margin:auto , give the image a display:block .
I've created a demonstration:
In the demonstration, I gave the image a class of .myImage and applied the style using that class (otherwise, ALL images would be centred...including the social media images).
W3C (the people who develop web standards) have a great page discussing how to centre elements: http://www.w3.org/Style/Examples/007/center
Feel free to experiment using my demo...and welcome to the club!
solution2
0 2015-09-19 19:33:32
You can set a class to the paragraph with the img , like:
<p class="center-img"><img ....
Then in CSS:
p.center-img{
text-align: center;
}
solution3
0 2015-09-19 19:41:30
The margin: 0 auto will only work if your element has width. A paragraph doesn't.
So you should just add a class to your image: <img class="center-img" ... > , and then define a width:
.center-img {
display: block;
width: 200px;
margin: 0 auto;
}
solution4
0 2015-09-19 19:57:18
The reason that your image will not center is because when you set the margins to auto for p elements in your CSS, this setting applies to the <p> element in your html (the paragraph). Now, I know you would expect that to center the paragraph element and everything inside the paragraph, but the problem here is that the <p> element will set its width to take up the entire space it is given. So really, it is already centered since it is filling the whole page. Since the image is a content of the paragraph, you can align it using "text-align: center;", but you have to apply this property to the <p> element in your CSS. This tells the paragraph to center its contents. If you apply text-align center to the img element, then it will try to center the contents of the img element, not the img element itself.
You need this:
p
{
text-align:center;
}
Now, I made this more simple since you are a beginner, but you should note that this will cause all of your paragraphs to have centered text. This is because you are setting the attributes of all "p" elements when you do this. If you want this to apply only to the image paragraph, then you will want to give its paragraph a class, like this:
<p class="imageParagraph"><img src="source" /></p>
Then in your css, you would set that class to have "text-align:center", like this:
.imageParagraph
{
text-align:center;
}
and make sure to remove the "text-align:center;" code from the "p" element in your css. In css, you identify a class with a period before it, like I showed above. Tag-names, like the "p" tag have nothing in front of them.
Also, for the sake of learning, I want to note the "margin: auto" stuff:
Setting margin-left and margin-right to "auto" is normally used to center block-type elements ( <p> is a block element). So this is a correct method. The problem you had, which I stated above, is that the <p> element's width fills the whole area. So you also have to set the width that you want the <p> element to have. You can set that in the CSS with the "width" attribute. The problem with using this method to center your image, is that if the image is not centered inside the <p> element, then your image will not be centered in the page. To fix this, you can either add "text-align:center" to the paragraph as discussed above, or you can just make sure to set the paragraph width and the image width to the same value. Alternatively, you can also choose to change the "display" style of the img element to block .
solution5
0 2015-09-19 20:24:51
I've found defining a set of simple CSS centering widgets is useful to handle each case of centering. (There are more than I've listed here, but these address your question and I've also included a link to a comprehensive CSS centering resource.)
Centering text
The simplest case is centering for P and H tags, which requires no width setting in order to center text because each P (or H) is centered between its margins. That often makes text-align:center an incomplete solution.
.center-text {
text-align:center;
}
An example of usage <p class=center-text>This text is centered</p>
Centering text within a div that is x% (1-100) of the active div
Why is this useful? You can display centered text correctly even when the user resizes the browser pane by using a percentage instead of pixels or ems. In the example below you could use 2 of these within the body statement and you'd have a 2 column page with centered content in each column, that will resize. Bottom line you must set the width, it does not use the margins, it will not center.
.center-block-50 {
margin-left: auto;
margin-right: auto;
width: 50%;
}
Centering and image within a block
Note: It is possible to center an image using the above CSS, but this is another way to center an image.
Centering images is where you need the display:block in order to center align, but you do not require a width definition because this block method again uses the margins as with the P and H tags.
.center-image {
display: block;
margin-left: auto;
margin-right: auto
}
The definitive guide for CSS centering is available from w3.org (the group that defines the standards) here .
Good luck, and happy centering!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.