Question 42923 in Html Question posted in
Some basic documentation can be found here.

How do i make <h3> at the same height – Html

I got h3 tags. One is lower
I tried using margin: 0 and padding but it didn’t worked and i don’t know what is wrong.

After deleting align-items: center it fixed the height but how to make it in center of container on picture without breaking height of h3
Image

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items:top;
}
<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>
Tags:

4

Answers


  1. 0

    Always use the appropriate HTML tags. CSS flex will align these for you.

    footer {
  display: flex;
  justify-content: center;
}
    <footer>
  <section>
    <h3>Menu 1</h3>
      <ul>
        <li><a href="#">O nas</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Regulamin</a></li>
        <li><a href="#">Polityka Prywatności</a></li>
      </ul>
  </section>
  <section>
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </section>
</footer>
    Login or Signup to reply.
  2. 0

    change align-items:center to align-items:start and wrap everything in a container. Give height of 100vh to the container and use flex again

    .info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items: start;
}

#container {
  display: flex;
  height: 100vh;
  align-items: center;
}

body,div,html{
margin:0;
padding:0;}
    <div id='container'>
  <div class="info-footer">
    <div class="info-footer-info">
      <h3>Menu 1</h3>
      <ul>
        <li><a href="#">O nas</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Regulamin</a></li>
        <li><a href="#">Polityka Prywatności</a></li>
      </ul>
    </div>
    <div class="info-footer-menu">
      <h3>Menu 2</h3>
      <ul>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    remove align-items: center; from .info-footer style.

    What align-items does is:

    Aligns flex items along the cross axis of the current line of the flex container.

    Choosing center means it places the elements to the center of the flex container and works its way around that. In other words, your footer-info and footer-menu are aligned to the center of the flex container rather than the start.

    .info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
}
    <div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    to achive what you want with being able to center the info you can wrap them inside another div so the align-items won’t effect them

    .info-footer {
      background-color: rgba(33, 40, 59, 0.8);
      color: #fff;
      border: 1px solid rgb(53, 56, 72);
      width: 100%;
      height: 14em;
      display: flex;
      justify-content: center;
      gap: 200px;
      padding: 20px 10px;
      align-items:center;
 }
.info-footer-box{
    display: flex;
 }
        

    <div class="info-footer">
      <div class="info-footer-box">
        <div class="info-footer-info">
          <h3>Menu 1</h3>
          <ul>
            <li><a href="#">O nas</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Regulamin</a></li>
            <li><a href="#">Polityka Prywatności</a></li>
          </ul>
        </div>
        <div class="info-footer-menu">
          <h3>Menu 2</h3>
          <ul>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search