cssreactjscss-positionpositioning

Error with CSS position: relative, position: absolute, etc


I am trying to make a portfolio website. However, there is a CSS positioning error that I am encountering. I was wondering, with keeping the image inside of the 'container', so i can center it, how I could scoot it down a little bit.

import "./App.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="text-container">
          <h1>Hey, I'm <span>Jaxson</span>.</h1>
          <p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank (Science Fair) project using an Arduino Uno.</p>
        </div>
        <div className="image-container">
          <img src="https://mail.google.com/mail/u/1?ui=2&ik=417fae867b&attid=0.1.1&permmsgid=msg-f:1764564355309681295&th=187cfdee9d8cba8f&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8XCKr1gjbLPb5wVB7i2eN66jk6W7ZrdvifuuNWQcPW9ndJ7taOUyxM0YTgBK33mWCfVe2RGtiz7rLlUC_-pxRp5MuDFZzBykhX6bv7f_oGtA3BD1UK5HAmSN8&disp=emb"></img>
        </div>
      </div>
    </div>
  )
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');
html {
     min-height: 100%;
}
body {
     height: 100%;
     width: 100%;
     background-color: #191a1d;
}
h1 {
     color: #f6f5ff;
     font-family: Quicksand;
}
p {
     color: rgb(212, 212, 212);
     font-family: Poppins;
     font-weight: 200;
}
h1, p {
     width: 450px;
}
.container {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
span {
     background-image: linear-gradient(to right, #dd5e89, #f7bb97);
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
img {
     height: 250px;
     border-radius: 10px;
     position: relative;
}
.text-container, .image-container {
     display: inline-block;
     border: 1px dashed red;
}
.image-container {
     
}

<3

I was trying to give it some extra margin or padding but that didn't work. Help!


Solution

  • You might want to refer to this StackOverflow answer of using flexbox to center your element: https://stackoverflow.com/a/19461564/8888888

    The general idea is you need to have your parent element set to flexbox with display: flex, then you can align the children with the other flexbox properties.

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');
    
    .App {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Other existing CSS below */
    
    html {
      height: 100%;
    }
    
    body {
      min-height: 100%;
      width: 100%;
      background-color: #191a1d;
      margin: 0;
    }
    
    h1 {
      color: #f6f5ff;
      font-family: Quicksand;
    }
    
    p {
      color: rgb(212, 212, 212);
      font-family: Poppins;
      font-weight: 200;
    }
    
    h1,
    p {
      width: 450px;
    }
    
    span {
      background-image: linear-gradient(to right, #dd5e89, #f7bb97);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    img {
      height: 250px;
      border-radius: 10px;
      position: relative;
    }
    <div class="App">
      <div class="container">
        <div class="text-container">
          <h1>Hey, I'm <span>Jaxson</span>.</h1>
          <p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank
            (Science Fair) project using an Arduino Uno.</p>
        </div>
        <div class="image-container">
          <img src="https://placekitten.com/250/250" />
        </div>
      </div>
    </div>