Getting My Picture to Center

1

For the life of me, I can’t get this picture to center. I don’t know what is happening and I’ve tried multiple different things to get it to work. This is my first project so any other useful hints would be fantastic.

2 
<div id="pic-section">
  <img id="Pic-Eugen-Ely" src="https://airandspace.si.edu/sites/default/files/styles/body_large/public/images/editoral-stories/thumbnails/NH77579_640.jpg?itok=MbVZLluY"alt="Eugen Ely"></img>
</div>

#pic-section {
 margin: auto;
 
}

Make sure you get rid of that div that’s floating around on it’s own above the img tag in the html too.

3 
<div class="col-xs-12">
  <div class="img-center">
    <img class="text-center" id="Pic-Eugen-Ely" src="https://airandspace.si.edu/sites/default/files/styles/body_large/public/images/editoral-stories/thumbnails/NH77579_640.jpg?itok=MbVZLluY" alt="Eugen Ely"></img>
    </p>Eugene Ely before landing on the USS Pennsylvania, 18 January 1911</p>
  </div>
</div>

.img-center {
  text-align: center;
}
1 Like
4

Appreciate it! I removed the div

5

michal9909. I applied your changes and it worked great! can you tell me the difference from what I was doing and how your code worked.

6

I cut the img link and added it to the same div as “A pioneering aviator”, which, by the way, could have been in the same div as the main title and it worked.

7

Dan_Cio. I removed that unnecessary div I had in there.

8

@RDComeau hi there, if I recall correctly your img was within a div and both had the same width size. What I did is I used another <div class="col-xs-12"></div> to get the full width of your container and just centred everything with img-center.