使用flexbox在不同位置對齊標題和div中的輸入-有解無憂

我想將這個標題部分與回應性對齊在垂直中心。現在，如果我使用 margin-top 則頁面沒有完全回應，我想在輸入的開頭對齊標題部分。使用flexbox在不同位置對齊標題和div中的輸入

這是我的 HTML 代碼


    <nav id="header">
        <ul  id="navigation">
            <li>Home</li>
            <li>About Us</li>
            <li>Register</li>
            <li>Contact Us</li>
        </ul>
        <div id="headersection">
            <h1>
                Health is Wealth
            </h1>
            <input type="search" name="Search" id="" placeholder="Search">
        </div>
    </nav>

下面是我的 CSS 代碼

*{
    margin: 0px;
    padding: 0px;
    color: white;
}

#header{
    height: 300px;
    width: 100%;
    background-image: url(healthy.jpg);
}

#headersection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#headersection input{
   width: 50%;
   height: 40px;
   border-radius: 20px;
  border: none;
}

#navigation{
    display: flex;
    flex-wrap: wrap;
}
#navigation li{
    font-weight: bold;
    font-size: 1rem;
    padding: 20px;
    list-style: none;
}

使用flexbox在不同位置對齊標題和div中的輸入我想在藍色部分對齊這個輸入和標題部分，我想在這個輸入部分的開頭對齊我的標題部分，如黃線所示。

uj5u.com熱心網友回復：

為#headersection 使用屬性 valign="middle" 這樣你就不必使用 margin-top，它會將它放在中間，然后去掉 #headersection 的對齊項

uj5u.com熱心網友回復：

如果 headersection 的寬度與輸入一樣寬，則可以使用

#headersection{
align-items: flex-start;

}

uj5u.com熱心網友回復：

您應該先添加一個<div > </div>。

設定此 div 的 max-width 值以調整導航文本的開頭。

由于您想在此輸入部分的開頭對齊我的標題部分，如黃線所示，您需要添加#navigation > li:nth-child(1){padding-left: 0;}您的 css。

我希望下面的代碼可以幫助你。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        color: white;
        background-color: lightgreen;
        background-image: url(healthy.jpg);
      }

      #header {
        height: 300px;
        width: 100%;
      }

      #headersection {
        display: flex;
        flex-direction: column;
        /* align-items: center;
        justify-content: center; */
      }
      #headersection input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border: none;
        background: white;
      }

      #navigation {
        display: flex;
        flex-wrap: wrap;
      }
      #navigation li {
        font-weight: bold;
        font-size: 1rem;
        padding: 20px;
        list-style: none;
      }
      #navigation > li:nth-child(1){
          padding-left: 0;
      }
      .container {
          max-width: 768px;
          margin-left: auto;
          margin-right: auto;
      }
    </style>
  </head>
  <body>
      <div class="container">
    <nav id="header">
      <ul id="navigation">
        <li>Home</li>
        <li>About Us</li>
        <li>Register</li>
        <li>Contact Us</li>
      </ul>
      <div id="headersection">
        <h1>Health is Wealth</h1>
        <input type="search" name="Search" id="" placeholder="Search" />
      </div>
    </nav>
</div>
  </body>
</html>

uj5u.com熱心網友回復：

試試這個：

*{
    margin: 0px;
    padding: 0px;
    color: white;
}

#header{
    height: 300px;
    width: 100%;
    background-color: red; /*instead your image. only for seen*/
}

#headersection{
    display: flex;
    /*flex-direction: column;*/
    align-items: center; 
    justify-content: center;
    height: 75%; /*added*/
    width: 85%; /*added*/
}

#headersection input{
   width: 50%;
   height: 40px;
   border-radius: 20px;
  border: none;
}

#navigation{
    display: flex;
    flex-wrap: wrap;
}

#navigation li{
    font-weight: bold;
    font-size: 1rem;
    padding: 20px;
    list-style: none;
}
h1{ /*added*/
    margin-right: 1.25em;
}

使用flexbox在不同位置對齊標題和div中的輸入

如果合適，請幫我評論。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387165.html

標籤：html css

上一篇：如何在控制器中執行兩個Mono并行任務。彈簧WebFlux

下一篇：如何從復選框/標簽內部移動文本