Tribute Centering

HTML-CSS
1

Tell us what’s happening:
I can’t center the image I have tried everything. I have been on this for 2.5 hours now.
Please help.

Your code so far
https://codepen.io/AMcVay/pen/XWdwMdL

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

2

Just use text-align: center.

3

I put it in the figure. it didn’t work. Am I doing it wrong?

4

You have a number of issues here but don’t despair :love_you_gesture:

First, you should remove the inline-styles that you applied to your image in the HTML. Those inline-styles will always override the CSS styles, and it’ll just confuse you if you try to write CSS styles for the same element, but can’t see any effect.

Next, your CSS:

.responsive{ 
  Max width: 500px; /* this should be max-width*/
  width:90%; 
  Height: auto;} /* properties are never uppercase */
#figure{
  width 100%;
  Height:auto; /* properties are never uppercase */
  align-items:center; /* this doesn't do anything because the figure is not a flex-container */
  margin:auto auto;
  grid-area: img-div; /* this doesn't do anything because you have no grid defined anywhere */
  justify-content:center; /* this doesn't do anything because the figure is not a flex-container */
}
#image {
  width: 90%;
  height: auto;
  max-width: 625px;
  margin:2em auto 1em auto; /* this is what actually centers the image, but.... */
  display:block;
  position: absolute; /* ... this makes the image stick to the left corner of the figure element */

}
1 Like
5

Correct me if I’m wrong but does that still work if the image is set to display:block ?

1 Like
6

You are a code god thank you so much!!

7

That is wildly exaggerated but I’ll take it of course.

I went through these challenges just 18 months ago BTW, so keep going and become a god soon :smiley:

1 Like
8

Oh, derp, I’m sorry. I thought you were trying to center the text for some reason. :expressionless: I’m glad @jsdisco was able to help you out.

2 Likes
9

Lol. It’s fine. That’s why we have this forum right?