パディングを追加すると縦方向のアラインメントの問題が発生する

私は、左側に2つの階層と右側のナビゲーションバーを含むヘッダーを持っています。私はすべてを縦に整列させることに問題を抱えています。私は垂直方向の整列の問題に関して何百万もの質問を行ってきましたが、私の問題は解決していません。パディングを追加すると縦方向のアラインメントの問題が発生する

メニューラベルにパディングを追加すると、hrefはもはや真ん中で垂直に整列されなくなります。メニューのパディングが0の場合、すべてがうまく整列します。 navbarは高さと幅を必要としますか？

.menu { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: #19c589; 
 
    display: block; 
 
    float: right; 
 
    margin-right: 100px; 
 
    border: red 3px solid; 
 
    padding: 10px 0; 
 
    vertical-align: middle; 
 
} 
 

 
#header nav{ 
 
    display:inline; 
 
} 
 
#header { 
 
    background: gray; 
 
    padding: 28px 0 26px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    width: 100%; 
 

 
} 
 
a[href="#top"] { 
 
    margin-left:100px; 
 
    margin-right:50px; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
a img{ 
 
    vertical-align:middle; 
 
} 
 
a, a:visited{ 
 
    color: white; 
 
}

<body> 
 
    <header id="header"> 
 
     <a href="#top">Test</a> 
 
     <a href=""> 
 
      <img src="" alt="img" height="24" width="24"> 
 
     </a> 
 
     <nav id="navbar"> 
 
     \t <label class="menu">Menu</label> 
 
     </nav> 
 
    </header> 
 

 
</body> 
 
</html>

出典

2016-05-26 eric

何に合わせるべきですか？ –

すべての要素は、垂直方向の中心に沿って直線状に配置する必要があります。メニューラベルは、2つの階層とその行にありません。 – eric

編集したフィドルこのあなたのために働く必要がありhttps://jsfiddle.net/5f3pbg8b/13/

注：あなたはあなたができる、浮かん要素がトップに並んでいるので、これは、浮いた要素でvertical-align: middle;を使用することはできませんその詳細はこちらhttps://www.w3.org/TR/CSS21/visuren.html#floats

.menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    background: #19c589; 
    position: absolute;/* new */ 
    right: 0;/* new */ 
    margin-right: 100px; 
    border: red 3px solid; 
    padding: 10px 0; 
    margin-top: -10px;/* new */ 
}

出典

2016-05-26 22:31:07

ありがとうございました。私は浮きについてそれを知らなかったので、私は読まなければならないでしょう。右側にメニューを表示する方法はありますか？それとも、余白を追加するだけですか？ – eric

@ericあなたはフィドルを見ましたか？右に移動します。 –

ああスナップ、間違ったフィドルは私に固定する分を与える –

パディングを追加すると縦方向のアラインメントの問題が発生する

答えて

関連する問題