How can I line up this button better with the content in the middle? It seems off center to me:-CodePudding

margin-top on the button itself may be the answer but it feels wrong to me. If it is hopefully an answer will confirm. What is the best solution to lower the button a smidgen?

The codepen for extra context: https://codepen.io/AdanRod133/full/WNZEYJX

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: coral;
  display: grid;
  grid-template-columns: 100px 300px 115px;
  grid-row-gap: 1em;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100px;
  padding: 10px;
}

img {
  width: 100%;
  height: 100%;
  background-color: #2D8C9E;
}

.btn-learn {
  justify-self: center;
  align-self: center;
  height: 40px;
  border: none;
  border-radius: 10px;
  width: 125px;
}

.body-title {
  font-size: 1.15em;
  line-height: 1.5em;
  font-weight: bold;
  justify-self: center;
}

.text-body {
  font-size: 16px;
  grid-column: 3 / 5;
}

<div >
  <img src="" alt="">
  <div >
    <h3 >
      Startup
    </h3>
    <p >Create Websites Online using the Startup Boostrap 5 builder</p>
  </div>
  <button >Learn More <i ></i></button>
</div>

CodePudding user response：

I have wrapped your button in a flex container and used its property align-items: center

There were also some styling changes I have made

you have made three column in grid with 100px 300px and 100px

but assigned the button with width: 125px that will make the styling error

<div >
    <img src="" alt="">
    <div >
        <h3 >
        Startup
    </h3>
    <p >Create Websites Online using the Startup Boostrap 5 builder</p>
    </div>
    <div >
    <button >Learn More <i ></i></button>
    </div>
</div>

body{
    font-family: "Poppins", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
}

.container{
    background-color: coral;
    display: grid;
    grid-template-columns: 100px 300px 125px;
    grid-row-gap: 1em;
    justify-content: space-between;
    align-items: center;
    width: 40%;
    height: 90px;
    padding: 5px 20px;
}

img{
    width: 100%;
    height: 100%;
    background-color: #2D8C9E;
}

.btn-learn{
/*  justify-self: center; */
/*  align-self: center; */
    height: 40px;
    border: none;
    border-radius: 10px;
    width: 100%;
/*  margin-top: 16px; */
}

.body-title{
    font-size: 1.15em;
    line-height: 1.5em;
    font-weight: bold;
    justify-self: center;
}

.text-body{
    font-size: 16px;
    grid-column: 3 / 5;
}

.button-container
{
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items:center
}

CodePudding user response：

You should restructure your div in a better way. For example, I think you are looking for content box like this:

I would suggest you to use Bootstrap if you are new to front-end web development.

Here is an example of how your Bootstrap-5 code looks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
    <style>
      body {
        font-family: "Poppins", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      img {
        width: 100%;
        height: 100%;
        background-color: #2d8c9e;
      }

      .btn-learn {
        justify-self: center;
        align-self: center;
        height: 40px;
        border: none;
        border-radius: 10px;
        width: 125px;
      }

      .body-title {
        font-size: 1.15em;
        line-height: 1.5em;
        font-weight: bold;
        justify-self: center;
      }

      .text-body {
        font-size: 16px;
        grid-column: 3 / 5;
      }
    </style>
  </head>
  <body>
    <div >
      <div >
        <div >
          <img src="" alt="" />
        </div>
        <div >
          <h3 >Startup</h3>
          <p >Create Websites Online using the Startup Boostrap 5 builder</p>
        </div>
        <div >
          <button >Learn More <i ></i></button>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>