0

I am trying to center .card-both into .card-top flexbox wrapper. Unfortunately, alignment on the vertical line does not seem to work.

Here is visualisation of what I am trying to achieve

Could you please take a look and help me out? I also appreciate if you point out bad practices of my CSS/HTML, as I am still learning.

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  width: 80px;
}

.menu ul {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: lightblue;
}

.header-logo {
  margin-right: auto;
}

.card-top {
  display: flex;
  flex-direction: column;
  height: 50vh;
  width: 100%;
  background-color: #1F2937;
}

.box {
  border: 1em solid lightcoral;
  height: 100px;
  flex: 0 0 100px;
  min-width: 100px;
  flex-basis: auto;
  margin: auto;
  flex-wrap: wrap;
}

.boxes-wrapper {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 20px;
  width: 100%;
  flex-basis: 100px;
  flex-wrap: wrap;
}

.text-mid-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 140px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.card-mid {
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.text {
  text-align: center;
}

.text-image-wrapper {
  display: flex;
  flex-flow: column wrap;
}

//*.separate {
margin-bottom: 15vh;
background: #1F2937;
overflow:auto;

}
* //
.card-top-left {
  width: 50%;
}
.card-top-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
}
.card-both {
  display: flex;
  flex-basis: auto;
  justify-content: center;
  gap: 60px;
  background-color: #1F2937;
}
.placeholder-image {
  width: 50vh;
  height: 15vh;
  background-color: lightcyan;
  margin: 0;
  padding: 0;
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="menu">
    <ul>
      <div class="header-logo">
        <li>Header Logo</li>
      </div>
      <li>header link one</li>
      <li>header link two</li>
      <li>header link three</li>
    </ul>
  </div>

  <div class="card-top">
    <div class="card-both">
      <div class="card-top-left">
        <h1> This website is awesome</h1>
        <p>This website has some subtext that goes here under the main title. It's a smaller font and the color is a lower contrast</p>
        <button class="sign-up-top">Sign up</button>
      </div>
      
      <div class="card-top-right">
        <div class="placeholder-image">
          <p>this is a placeholder for an image</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card-mid">
    <p>Some random information</p>
    <div class="boxes-wrapper">
      <div class="text-image-wrapper">
        <div class="box"></div>
        <div class="text">
          <p>Some random info666</p>
        </div>
      </div>
      
      <div class="text-image-wrapper">
        <div class="box"></div>
        <div class="text">
          <p>Some random info666</p>
        </div>
      </div>
      
      <div class="text-image-wrapper">
        <div class="box"></div>
        <div class="text">
          <p>Some random info666</p>
        </div>
      </div>
      
      <div class="text-image-wrapper">
        <div class="box"></div>
        <div class="text">
          <p>Some random info666</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <br>
  
  <div class="inspiring-text">
    <p>Everything suits me that suits your designs, O my universe. Nothing is too early or too late for me that is in your own good time. All is fruit for me that your seasons bring, O nature. All proceeds from you, all subsists in you, and to you all things
      return.</p>
    <p>- Marcus Aurelius</p>
  </div>
  <br>
  
  <div class="call-to-action-wrapper">
    <div class="call-to-action">
      <p>Call to action, this is time!</p>
      <p>Sign up for the news clicking that button on the right!</p>
      <button class="sign-up-bot">Sign up</button>
    </div>
  </div>
  
  <div class="footer">
    <p>Copyright: no one.</p>
  </div>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
goose
  • 1
  • 1
  • I'm sure there are duplicates for this somewhere but flexbox on the parent element is making two columns by default due to the default value of flex-direction (row). Set flex-direction: column to put the children on their own rows. Then justify-content: center to center it. – TylerH Jul 17 '23 at 18:17
  • Protips: 1) A div is not a valid child of a list. Put the logo div _inside_ the list item if you actually need it. 2) Line breaks are not to be used for spacing. Use margin, etc. 3) Don't use heavy-handed global resets like your first rule. Some things _should_ have margin and padding left on them, like paragraphs and lists. It's rarely necessary to wipe that out. 4) A little whitespace makes your markup much easier to interpret. I like to leave blank lines between successive block-level elements. See my formatting of your snippet for example. – isherwood Jul 17 '23 at 18:24
  • 5) Use a good editor or HTML validator. It would point out the list problem and the extra closing div tag, for example. – isherwood Jul 17 '23 at 18:24

0 Answers0