Home > Blockchain >  How do I center my project images? They seem to want to stay to the left, I don't know how to f
How do I center my project images? They seem to want to stay to the left, I don't know how to f

Time：03-07

I'm having issues centering the images under "My Projects" section. I would really appreciate it if anyone could give me some tips to center them. It does however stay centered when the dimensions are responsive, but when it's at full-screen it will only stay to the left. How do I change the code such that images will stay centered, with consideration for more images in the future.

Picture of my problem

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --ff-primary:'Overpass Mono', monospace;
    --ff-secondary:'Source Code Pro', monospace;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-bg: #fff;
    --clr-dark: #0d2e1e;
    --clr-accent: #98ec98bd;

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-body: 1rem;
    
    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25), 0.125em 0.125em 0.25em rgba(0,0,0,.15); 
}



body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}
section {
    padding: 5 em 2em;
}
img {
    display: block;
    max-width: 100%;
}

h1 h2 h3 {
    line-height: 1;
    margin: 0; 
  
}
h1 {
   font-size: var(--fs-h1) ; 
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3)
}

.section__title {
    margin-bottom: .25em;
}
.section__title--intro {
    font-weight: var(--fw-reg);
}
.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3)
}
.section__subtitle--intro,
.section__subtitle--about {
    background: var(--clr-accent);
    /*background-color: lightblue;*/
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}
.section__subtitle--work {
    color: white;
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}
.intro {
    position: relative;
}
header {
    background-color: var(--clr-dark);
    /*display:inline;
    flex-direction: row;
    justify-content: space-between;
    padding: 1 em;
    */
}
.nav {
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.nav a {
    color:white;
    text-decoration: none;
}
.nav li {
    list-style: none;
    display:flex;
    justify-content: space-evenly;
}

.intro__img {
    box-shadow: var(--bs);
}
.section__subtitle--intro {
    display:inline-block; 
}
.about-me__img {
    box-shadow: var(--bs);
}
.my-work {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
}
.portfolio {
    /*
    display flex and flexdirection should be deleted
    display:flex;
    flex-direction: row;
    display:grid;
    grid-template-columns: repeat(auto-fit, minxmax(300px, 1fr));
    max-width: 400px;
    margin: 0 auto;
    */
    flex:30%;
    padding: 5px;
}
.container {
    display:flex;
}
.portfolio_item {
    background: var(--clr-accent);
    overflow:hidden;
}
.portfolio__img {
    /*width: 100%*/
    
    width: 250px; height: 250px;
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5,1),
        opacity 250ms linear;
}
.portfolio__img:hover,
.portfolio_item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .75;
}


@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
    }
    .intro__img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }

    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100%   1.5em);
    } 
.footer {
    background: #111;
    color: whitesmoke;
    text-align: center;
    padding: 2.5em 0; 
    font-size: var(--fs-h3);
}
.footer a {
    color: inherit;
    text-decoration: none;
}
.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}
.footer__link:hover {
    text-decoration: underline;
}
.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}
.social-list__item {
    margin: 0 .5em;
}
.social-list__link {
    padding: .5em;

}


@media (min-width: 600px) {
    .about-me {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas: 
        "title img"
        "subtitle img"
        "text img";
        grid-column-gap:2em;
    }
   .section__title--about {
        grid-area: title;
    }
    .about-me__img {
        grid-area:img;
    }
    .section__subtitle--about{
        grid-column: 1/-1;
        grid-row: 2; 
        position: relative;
        left: -1em;
        width: calc(100%   2em);
        padding-left: 1em;
        padding-right: calc(200px   4em);
        /*text wont touch the image*/
    }
    .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
    }

@media (min-width: 800px) {

    .about-me {
        max-width: 1000px;
        margin: 0 auto; 
    }
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
        }
    }
}
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
    <title>Sensess' Portfolio</title>
    <link rel="stylesheet" href="style.css">
    
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass Mono:wght@300&family=Source Code Pro:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f671b77a0f.js" crossorigin="anonymous"></script>

</head>
  <body>
<!--Navigation-->  
      <header>
        <nav >
          <ul >
            <li ><a href= "#home" >Home</a></li> 
            <li ><a href="#about" >About Me</a></li>
            <li ><a href="#work" >My Projects</a></li>
            <li ><a href="#contactme" >Contact Me</a></li>
          </ul>
        </nav>
    </header>
<!--End of Navigation--> 

     
<!--introduction-->

    <section  id="home">
        <h1 >
            Hey, I'm <strong>Sensess</strong>
        </h1>
        <p >Aspring Front-End Dev</p>
        <img src="Me.JPG" alt="" >
     </section>
<!--About Me-->

    <section  id="about">
        <h2 >Who I am</h2>
            <p >Current GWU Full-Stack Developer Student based out of NOVA</p>
        
            <div >
            <p>DJFKLDSJFKDSLJFEWNFIOEWNFIOEWFOIWEJFOIEWJFIOWEJFOWEJF</p>
            <p>WJFEWJOIFJEWOIFJWOEIGJOIWEFJOIWEJFOIEWJFOIWEJFOIWEJF</p>
        </div>
        <img src="aboutme.jpg" alt="" >
    </section>

    <!--My Projects-->

    <section  id="work">
        <h2 >My Projects</h2>
        <p >An overview of the work I've done </p>
        <!--delete this--><div 
        <div >
            <!--Project 1-->
            <a href="#" ><img src="horiseonmockup.jpg" alt="Project 1" ></a>
             <!--Project 2-->
            <a href="#" ><img src="runbuddymockup.jpg" alt="Project 2" ></a>
             <!--Project 3-->
            <a href="#" ><img src="javascriptpasswordmockup.jpg" alt="Project 3" ></a>
        </div>
    </div>
    </section>

    <!--Footer-->

    <footer >
        <a href="mailto:[email protected]"  id="contactme">Email Me</a>
            <ul >
                <li >
                    <a  href="https://github.com/amadayasuki">
                        <i ></i>
                    </a>
                </li>
                <li >
                    <a  href="https://www.linkedin.com/in/sensess-yentzer-915882160/">
                        <i ></i>
                    </a>
                </li>
                <li >
                    <a  href="https://www.instagram.com/linglinglomeinnnn/">
                        <i ></i>
                    </a>
                </li>
            </ul>
        </footer>
    </body>
</html>

CodePudding user response：

I've solved your problem. Just replace your CSS of .portfolio with the below code.

    .portfolio {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       width: 100%;
       padding: 5px;
    }

CodePudding user response：

You have 1 closed tag problem under div of portfolio(I fixed it for you)

I also modified .portfolio like this to centralise your porfolio images

.portfolio {
  display: flex;
  margin: 0 auto;
  padding: 5px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

 :root {
  --ff-primary: 'Overpass Mono', monospace;
  --ff-secondary: 'Source Code Pro', monospace;
  --fw-reg: 300;
  --fw-bold: 900;
  --clr-bg: #fff;
  --clr-dark: #0d2e1e;
  --clr-accent: #98ec98bd;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-body: 1rem;
  --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}

body {
  background: var(--clr-light);
  color: var(--clr-dark);
  margin: 0;
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
}

section {
  padding: 5 em 2em;
}

img {
  display: block;
  max-width: 100%;
}

h1 h2 h3 {
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3)
}

.section__title {
  margin-bottom: .25em;
}

.section__title--intro {
  font-weight: var(--fw-reg);
}

.section__subtitle {
  margin: 0;
  font-size: var(--fs-h3)
}

.section__subtitle--intro,
.section__subtitle--about {
  background: var(--clr-accent);
  /*background-color: lightblue;*/
  padding: .25em 1em;
  font-family: var(--ff-secondary);
  margin-bottom: 1em;
}

.section__subtitle--work {
  color: white;
  font-weight: var(--fw-bold);
  margin-bottom: 2em;
}

.intro {
  position: relative;
}

header {
  background-color: var(--clr-dark);
  /*display:inline;
        flex-direction: row;
        justify-content: space-between;
        padding: 1 em;
        */
}

.nav {
  color: var(--clr-light);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.nav a {
  color: white;
  text-decoration: none;
}

.nav li {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
}

.intro__img {
  box-shadow: var(--bs);
}

.section__subtitle--intro {
  display: inline-block;
}

.about-me__img {
  box-shadow: var(--bs);
}

.my-work {
  background-color: var(--clr-dark);
  color: var(--clr-light);
  text-align: center;
}

.portfolio {
  display: flex;
  margin: 0 auto;
  padding: 5px;
}

.container {
  display: flex;
}

.portfolio_item {
  background: var(--clr-accent);
  overflow: hidden;
}

.portfolio__img {
  /*width: 100%*/
  width: 250px;
  height: 250px;
  transition: transform 750ms cubic-bezier(.5, 0, .5, 1), opacity 250ms linear;
}

.portfolio__img:hover,
.portfolio_item:focus .portfolio__img {
  transform: scale(1.2);
  opacity: .75;
}

@media (min-width: 600px) {
  .intro {
    display: grid;
    width: min-content;
    margin: 0 auto;
    grid-column-gap: 1em;
    grid-template-areas: "img title" "img subtitle";
    grid-template-columns: min-content max-content;
  }
  .intro__img {
    grid-area: img;
    min-width: 250px;
    position: relative;
    z-index: 2;
  }
  .section__subtitle--intro {
    align-self: start;
    grid-column: -1 / 1;
    grid-row: 2;
    text-align: right;
    position: relative;
    left: -1.5em;
    width: calc(100%   1.5em);
  }
  .footer {
    background: #111;
    color: whitesmoke;
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
  }
  .footer a {
    color: inherit;
    text-decoration: none;
  }
  .footer__link {
    font-weight: var(--fw-bold);
  }
  .footer__link:hover,
  .social-list__link:hover {
    opacity: .7;
  }
  .footer__link:hover {
    text-decoration: underline;
  }
  .social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
  }
  .social-list__item {
    margin: 0 .5em;
  }
  .social-list__link {
    padding: .5em;
  }
  @media (min-width: 600px) {
    .about-me {
      display: grid;
      grid-template-columns: 1fr 200px;
      grid-template-areas: "title img" "subtitle img" "text img";
      grid-column-gap: 2em;
    }
    .section__title--about {
      grid-area: title;
    }
    .about-me__img {
      grid-area: img;
    }
    .section__subtitle--about {
      grid-column: 1/-1;
      grid-row: 2;
      position: relative;
      left: -1em;
      width: calc(100%   2em);
      padding-left: 1em;
      padding-right: calc(200px   4em);
      /*text wont touch the image*/
    }
    .about-me__img {
      grid-area: img;
      position: relative;
      z-index: 2;
    }
    @media (min-width: 800px) {
      .about-me {
        max-width: 1000px;
        margin: 0 auto;
      }
       :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
      }
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sensess' Portfolio</title>
  <link rel="stylesheet" href="style.css">

  <!--Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Overpass Mono:wght@300&family=Source Code Pro:wght@300&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/f671b77a0f.js" crossorigin="anonymous"></script>

</head>

<body>
  <!--Navigation-->
  <header>
    <nav >
      <ul >
        <li ><a href="#home" >Home</a></li>
        <li ><a href="#about" >About Me</a></li>
        <li ><a href="#work" >My Projects</a></li>
        <li ><a href="#contactme" >Contact Me</a></li>
      </ul>
    </nav>
  </header>
  <!--End of Navigation-->


  <!--introduction-->

  <section  id="home">
    <h1 >
      Hey, I'm <strong>Sensess</strong>
    </h1>
    <p >Aspring Front-End Dev</p>
    <img src="Me.JPG" alt="" >
  </section>
  <!--About Me-->

  <section  id="about">
    <h2 >Who I am</h2>
    <p >Current GWU Full-Stack Developer Student based out of NOVA</p>

    <div >
      <p>DJFKLDSJFKDSLJFEWNFIOEWNFIOEWFOIWEJFOIEWJFIOWEJFOWEJF</p>
      <p>WJFEWJOIFJEWOIFJWOEIGJOIWEFJOIWEJFOIEWJFOIWEJFOIWEJF</p>
    </div>
    <img src="aboutme.jpg" alt="" >
  </section>

  <!--My Projects-->

  <section  id="work">
    <h2 >My Projects</h2>
    <p >An overview of the work I've done </p>
    <!--delete this-->
    <div >
      <div >
        <!--Project 1-->
        <a href="#" ><img src="horiseonmockup.jpg" alt="Project 1" ></a>
        <!--Project 2-->
        <a href="#" ><img src="runbuddymockup.jpg" alt="Project 2" ></a>
        <!--Project 3-->
        <a href="#" ><img src="javascriptpasswordmockup.jpg" alt="Project 3" ></a>
      </div>
    </div>
  </section>

  <!--Footer-->

  <footer >
    <a href="mailto:[email protected]"  id="contactme">Email Me</a>
    <ul >
      <li >
        <a  href="https://github.com/amadayasuki">
          <i ></i>
        </a>
      </li>
      <li >
        <a  href="https://www.linkedin.com/in/sensess-yentzer-915882160/">
          <i ></i>
        </a>
      </li>
      <li >
        <a  href="https://www.instagram.com/linglinglomeinnnn/">
          <i ></i>
        </a>
      </li>
    </ul>
  </footer>
</body>

</html>

CodePudding user response：

You have left one <div > open so first please fix it and than make below changes:

 .portfolio {
   flex-direction: row;
flex-wrap: no wrap;
display: flex;
margin-left: auto;
margin-right: auto;
   justify-content: center;
   width: 100%;
   padding: 5px;
}

Page link：https//www.codepudding.com/Blockchain/326249.html

Prev:How to footer at the end of the every page
Next:How to select all options within an optgroup?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding