how to evenly center image and text on the page-CodePudding

Hi I'm trying to put 3 sections of images and text at the center of the page. I've tried display flex align-items to center, and justify-content to center. justify-content to puts everything to the center of the page, but everything is uneven.

Here is my code

.contact-main-container{
    max-height: 100vw;
    justify-content: center;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    color: #e0e7ff;
    border: 2px solid black;
}

.contact-links-container{
    border: solid 1px black;
}

.contact-link{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

.contact-link img{
    width: 100px;
    height: 100px;
}

<div className="contact-main-container">
  <header>
    <h1>Contact Me</h1>
  </header>
  <div className="contact-links-container">
    <section className="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
      <a>[email protected]</a>
    </section>
    <section className="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
      <a>Github</a>
    </section>
    <section className="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
      <a>Linkedin</a>
    </section>
  </div>
</div>

CodePudding user response：

I don't know why you use className your HTML has to be class instead of className. Try to make your html with class then works fine your code.

I don't know which kind of center you want, so I had put 2 snippets.

Here is your updated snippet to be,

Snippet 1 : icons in Vertical

.contact-main-container{
    max-height: 100vw;
    justify-content: center;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    color: #e0e7ff;
    border: 2px solid black;
}

.contact-links-container{
    border: solid 1px black;
}

.contact-link{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

.contact-link img{
    width: 100px;
    height: 100px;
}

<div >
  <header>
    <h1>Contact Me</h1>
  </header>
  <div >
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
      <a>[email protected]</a>
    </section>
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
      <a>Github</a>
    </section>
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
      <a>Linkedin</a>
    </section>
  </div>
</div>

Snippet 2 : icons in Horizontal

.contact-main-container{
    max-height: 100vw;
    justify-content: center;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    color: #e0e7ff;
    border: 2px solid black;
}

.contact-links-container{
    border: solid 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-link{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    flex-direction:column;
    width:100%
}

.contact-link img{
    width: 100px;
    height: 100px;
    margin-bottom:10px
}

<div >
  <header>
    <h1>Contact Me</h1>
  </header>
  <div >
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
      <a>[email protected]</a>
    </section>
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
      <a>Github</a>
    </section>
    <section >
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
      <a>Linkedin</a>
    </section>
  </div>
</div>

CodePudding user response：

the default direction of flexbox is row you should define in ".contact-link" class: flex-direction: column;

.contact-main-container{
    max-height: 100vw;
    justify-content: center;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    color: #e0e7ff;
    border: 2px solid black;
}

.contact-links-container{
    border: solid 1px black;
}

.contact-link{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    flex-direction: column;
}

.contact-link img{
    width: 100px;
    height: 100px;
}

 <div >
        <header>
          <h1>Contact Me</h1>
        </header>
        <div >
          <section >
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
                <a>[email protected]</a>
          </section>
          <section >
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
            <a>Github</a>
          </section>
          <section >
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
            <a>Linkedin</a>
          </section>
        </div>
      </div>