Images not centred-CodePudding

enter image description here

I am new to HTML and CSS, and I am trying to center these images, I can margin them from left to specific pixels but I think there should be a better solution. I was googling for two days and I was trying to solve it but I can't find any solution. Don't know what else should I write here. I am self-studying with online courses.

body {
    background: #ffffff;
    color:#000;
}

h3{
  color: #000

}
@import url('https://fonts.googleapis.com/css2?family=Bonheur Royale&display=swap');

body  {
  font-family: "Bonheur Royale" ,cursive ;
  margin: 0px
}

body h1 {
  font-weight: 300;
  margin: 20px 30px;
}

#main-header {
  border-bottom:3px solid #000;

}

#top-stories {
    width: 1000px;
    margin:auto;
    margin-top: 20px;
    display: flex;
    align-items: center;


}

article{
    max-width: 33%;
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    




}

.article-image {
    height: 200px;
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
}

<!DOCTYPE html>
<html>
  <head>
    <title>My new webpage </title>
    <meta charset="utf-8">
    <meta name="author" content="Joe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">

    <link rel="stylesheet" href="css/style.css"/>
  </head>

  <body>
    <header id="main-header" >

      <h1>Welcome in my new page! </h1>

    </header>

    <main>
      <section id="top-stories">

      <article>

        <div class="article-image" style="background:url(/Users/jozefdzogan/Desktop/atom/images/iu.jpeg)"> </div>
        <h3> Dog </h3>
        <p> Text abou some dog i dont know </p>
      </article>

      <article>

        <div class="article-image" style="background:url(/Users/jozefdzogan/Desktop/atom/images/1344352035229.jpg)"></div>
        <h3> My old helmet </h3>
        <p>Some text goes in here </p>
      </article>

      <article>
        <div class="article-image" style="background:url(/Users/jozefdzogan/Desktop/atom/images/23289271.jpg)"></div>
        <h3> AIC steelwork <a href="#">More </a>  now </h3>
        <p> html </p>
      </article>


      </section>

    </main>

  </body>
</html>

Thank you

CodePudding user response：

In your #top-stories add the following css:

#top-stories {
  justify-content: center;
}

Above only works if you are using display: flex.

If you want equal spacing between your divs, consider justify-content: space-between and justify-content: space-around;

If you are NOT using flex:

#top-stories{
  text-align: center;
}

CodePudding user response：

What are you trying to achieve exactly? Your image is set as a background with size cover and position center. This means the image will fill the entire div and be aligned to the center of the div. As supposed to align to left, right, top, etc...

If you use the img tag instead of background you can center the image both horizontally and vertically if you like using display flex as the other answer suggested.

.article-image {
    height: 200px;
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
}


<article>

        <div class="article-image"> 
<!-- Here is how you would use the img tag instead of setting it with background--->
        <img src="/Users/jozefdzogan/Desktop/atom/images/iu.jpeg"></div>
        <h3> Dog </h3>
        <p> Text abou some dog i dont know </p>
      </article>