I cannot center an image with flexbox

HTML-CSS
1

Yes I know total noob I just started learning about a week ago. I’m on a project now to design a tribute page, and for the first time I’m simply trying to put a picture and have it centered using flexbox. But holy guacamole it will not center nomatter what i do! I tried giving the image a name/class and using that directly in css i tried putting it into div containers, i’ve googled everything I could and this picture simply refuses to center. It’ll do everything else, resize and so on, but it DOES NOT want to center. Any help is appreciated!

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <main id="main">
        <div class="top-of-page">
        <h1 id="title">Why Foxes Are So Cute</h1>
        <p><i>Really, all of them</i></p>
        <figure>
          </div>
          <img id="images" src="https://img.freepik.com/premium-photo/beautiful-fox-sleeping-kennel-roof_149066-215.jpg"
          </figure>
        </main>
      </body>
  <html>

css code:

.top-of-page {
  text-align: center;
  font-family: Arial;
  background-color: #ffcd91;
  margin-top: 1%;
  padding: 1% 0 1%;
  margin-bottom: 5px;
}

img {
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
}
2

HI @midnitewolfy !

You have a few things here

For your HTML, you have a couple of mistakes.

It looks like you didn’t close out your img tag here

This looks out of order here

Those should be swapped.

For your CSS, you want to apply the flex properties to the parent container, not the image itself.
The parent in this case would the figure element.

Then it will center

Screen Shot 2023-03-12 at 9.28.41 PM
Screen Shot 2023-03-12 at 9.28.41 PM1920×1126 105 KB

3

Thank you, i’m getting it

Hmm, when i go to my stylesheet, if i try to make a new control, I am trying

.img-div {
}

because the div id is img-div, but its not working.

4

Since it is an id you have to preface it with a #
The dot is for classes

5

Okay I’ve fixed the tags, and tried the new hashtag for the id, but the image still sits on the left side. Do i need to pick either justify content or align items exclusively and not use both?

image
image1917×839 127 KB

6

remove the width:60%

7

gasp

ty for your time helping me, i very much appreciate it

is there no way to adjust the size of the pic while using flexbox? Its fine like this for the project, but this question is more for curiosity’s sake

8

You can target the img element to adjust the size instead of the parent

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.