如何使頁面上的影像和文本均勻居中

嗨，我正在嘗試將 3 部分影像和文本放在頁面的中心。我已經嘗試將 flex align-items 顯示為居中，并將 justify-content 居中。justify-content 將所有內容放在頁面的中心，但所有內容都不平衡。

這是我的代碼

.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>

uj5u.com熱心網友回復：

我不知道你為什么使用className你的 HTML 來class代替className. 嘗試使您的 html 與class然后可以正常作業您的代碼。

我不知道你想要哪種中心，所以我放了 2 個片段。

這是您要更新的代碼段，

片段 1：垂直圖示

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

片段 2：水平圖示

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

uj5u.com熱心網友回復：

flexbox 的默認方向是你應該在 ".contact-link" 類中定義的行： 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 class="contact-main-container">
        <header>
          <h1>Contact Me</h1>
        </header>
        <div class="contact-links-container">
          <section class="contact-link">
                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
                <a>[email protected]</a>
          </section>
          <section class="contact-link">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
            <a>Github</a>
          </section>
          <section class="contact-link">
            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
            <a>Linkedin</a>
          </section>
        </div>
      </div>

uj5u.com熱心網友回復：

請執行此 CSS 以將 3 個部分放在頁面中心。

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

標籤：html css

上一篇：在C 中，如何使用作為物件陣列的私有變數？

下一篇：在django中具有一對一關系的同時上傳檔案