How to center an image and show in its entire width

Question

Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.

It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)

I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.

I want the image to be centered and maintain its original size:

<!DOCTYPE html>

<html>

<head>

<title>My Resume</title>

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">

<style type="text/css">

body, h1, h2, h3, p { 
margin: 0; 
}

header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}


h1 {
font-size: 72px;
}


h2 {
margin-bottom: 40px;
font-size: 24px;
}


h3 {
margin-top: 70px;
margin-bottom: 70px;

border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;

text-transform: uppercase;
letter-spacing: 2px;
}


main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}


p {
padding-bottom: 20px;
width: 500px;

margin-left: auto;
margin-right: auto;

line-height: 160%;
}


</style>

</head>


<body>

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

<p>
<a href="http://facebook.com"><img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" /></a>
<a href="http://twitter.com"><img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" /></a>
<a href="https://instagram.com"><img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" /></a>
<a href="http://pinterest.com"><img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" 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>Philosophy</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>

</html>

Thanks!

You set a width to p -> the image will not be in full size. normally you need a div. For centering your image see this post here: http://stackoverflow.com/questions/21860514/make-full-width-image-centered-in-div Hope this helps — Fabian Lurz, Sep 20 '15 at 11:50
Setting `width: 100%` or `max-width: 100%` on the `img` should do the trick. — pbaldauf, Sep 20 '15 at 11:56

score 0 · Answer 1 · answered Sep 20 '15 at 11:53

Just set the width 100% in image. It will automatically adapt with the parent width.

body, h1, h2, h3, p { 
margin: 0; 
}

header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}


h1 {
font-size: 72px;
}


h2 {
margin-bottom: 40px;
font-size: 24px;
}


h3 {
margin-top: 70px;
margin-bottom: 70px;

border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;

text-transform: uppercase;
letter-spacing: 2px;
}


main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}


p {
padding-bottom: 20px;
width: 500px;

margin-left: auto;
margin-right: auto;

line-height: 160%;
}

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

<p>
<a href="http://facebook.com"><img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" /></a>
<a href="http://twitter.com"><img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" /></a>
<a href="https://instagram.com"><img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" /></a>
<a href="http://pinterest.com"><img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" 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" width="100%" 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>Philosophy</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>

Yeah but adding the 100% shows it at it's full 500px % since all the p's witdth were at that! I got it anyway. Thanks so much :) — Starting Out, Sep 20 '15 at 12:04

score 0 · Answer 2 · answered Sep 20 '15 at 12:09

0

Thanks to all.

I wanna answer what I did in the end in case it helps someone else in the future.

The teacher/class said to "wrap" the image in a p. Following @Fabian Lurtz's adice in changed the p for a div.

Then in the css, following @Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl

I added:

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

If my "website" would have had more divs I could have just setup a class or id

Hope it helps. Thanks again to all!

answered Sep 20 '15 at 12:09

Starting Out

123
1
2
6

Instead of `margin-left: auto;` and `margin-right: auto;` the shorthand property `margin: 0 auto;` could be used. May have a look at the [Syntax](https://developer.mozilla.org/en/docs/Web/CSS/margin) of the margin property. – pbaldauf Sep 20 '15 at 12:15

score 0 · Answer 3 · answered Sep 21 '15 at 04:05

0

If you want to set the width to 100%, just set the width to- max-width: 100%

answered Sep 21 '15 at 04:05

Amulya Dhilip

13
5

How to center an image and show in its entire width

3 Answers3