HTML - 縦に中央で整列する

私のウェブサイトのナビゲーションバーを作成しようとしています。私はその要素でバーの高さを変えたいと思う。HTML - 縦に中央で整列する

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

私は 'ALIGN-垂直' タグと中央に縦に私の要素を合わせてみました。それは動作しません。これを行うには

出典

2017-03-07 float

一つの方法は、ulにpaddingの代わりheightを使用することです。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 50px 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

それはフレックスを使用する別の方法。垂直要素をセンタリングする最も簡単な方法の

ul { 
... 
    display: flex; 
    align-items: center; 
}

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

出典

2017-03-07 16:36:46 sol

を与えているあなたの答えをありがとう！できます！私はあなたの答えを受け入れることができるまで10分待たなければなりません。 – float

@float喜んでそれは助けた – sol

ワンフレキシボックスを使用することです。追加：

display: flex; align-items: center;

をあなたのULのスタイルには、リチウムの垂直中心に説明します。

出典

2017-03-07 16:38:00

vertical-alignプロパティはdisplay: inline-blockとのみ動作します。今や幅広いサポートを受けているflexを利用することができます。

私が行ったこと - この場合、のコンテナにdisplay: flexが追加されました。また、navbarの中央にそれを作るためにalign-contentsを加えました。

さらに読書 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     height: 100px; 
 
     display: flex; 
 
     align-items: center; 
 
    } 
 

 
    
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     vertical-align:middle; 
 
     text-decoration: none; 
 

 
    } 
 

 
    li a:hover { 
 
     background-color: #111; 
 
    } 
 

 
    li form input{ 
 
     vertical-align:middle; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="lib/style.css" /> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li><a class="active" href="#menu">Menu</a></li> 
 
      <li> 
 
       <form> 
 
       <input type="text" name="search" placeholder="Search.."> 
 
       </form> 
 
      </li> 
 
     </ul> 
 

 
    </body> 
 
</html>

出典

2017-03-07 16:38:21

、あなたのulの高さよりline-height5pxについて以下をごli要素を与えます。私はそれを95pxのline-height

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
} 
 

 
li { 
 
    float: left; 
 
    line-height: 95px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align:middle; 
 
    text-decoration: none; 
 

 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input{ 
 
    vertical-align:middle; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" href="lib/style.css" /> 
 
</head> 
 
<body> 
 
    <ul> 
 
     <li><a class="active" href="#menu">Menu</a></li> 
 
     <li> 
 
      <form> 
 
      <input type="text" name="search" placeholder="Search.."> 
 
      </form> 
 
     </li> 
 
    </ul> 
 

 
</body> 
 
</html>

出典

2017-03-07 16:39:44 Yousaf

HTML - 縦に中央で整列する

答えて

関連する問題