ナビゲーションとロゴの高さが垂直のテキストアライメントで

Question

私は簡単なナビを持っています。私は再作成しようとしています。私は正しいセクションに入っていて、私はリさんと付き合っています。 100％と私はセンターを調整するのではなく、ミドルを調整するリンクが必要です。私が達成しようとしているものの例

ここには私が達成しようとしているもののpage exampleがあります。そして、スクリーンショット：

これは私がこれまで持っているものです。

.page-header{ 
 
\t display: inline-block; 
 
    margin: 0; 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    z-index: 110; 
 
\t background-color: aqua; 
 
} 
 
.header-standard { \t 
 
\t height: 86px; \t 
 
} 
 
.branding{ 
 
\t display: block; 
 
\t float: left; 
 
} 
 
.branding img { 
 
\t height: 60px; 
 
\t margin: 15px 25px; 
 
} 
 
.standard-nav{ 
 
\t height: 100%; 
 
\t display: block; 
 
\t float: right; 
 
} 
 
.special-link { 
 
\t display: inline; 
 
    background-color: #ff5252; 
 
    width: 200px; 
 
\t height: auto; 
 
    text-align: center; 
 
\t margin: 0; 
 
} 
 
.standard-nav > ul > li {  
 
\t bottom: 0; 
 
} 
 
.standard-nav ul li { 
 
\t display: inline-block; 
 
\t padding: 0; 
 
\t margin: 0; 
 
}

<header class="page-header"> 
 
    <div class="header-standard"> 
 
    <div class="branding"> 
 
    \t <img src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <nav class="standard-nav"> 
 
    \t <ul> 
 
    \t \t <li>Link 1</li> 
 
    \t \t <li>Link 2</li> 
 
    \t \t <li>Link 3</li> 
 
    \t \t <li>Link 4</li> 
 
    \t \t <li class="special-link">Special Link</li> 
 
    \t </ul> 
 
    </nav> 
 
    \t 
 
    </div> 
 
</header>​

Answer 1

あなたはflexbox代わりにフロートを使用して、このレイアウトに近づくことができました。

.page-header { 
 
    margin: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 110; 
 
    background-color: aqua; 
 
} 
 

 
.header-standard { 
 
    height: 86px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 

 
.branding img { 
 
    height: 60px; 
 
    margin: 15px 25px; 
 
} 
 

 
.standard-nav { 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.standard-nav ul { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.special-link { 
 
    background-color: #ff5252; 
 
    width: 200px; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 

 
.standard-nav ul li { 
 
    list-style: none; 
 
    padding-right: .5em; 
 
}

<header class="page-header"> 
 
    <div class="header-standard"> 
 
    <div class="branding"> 
 
     <img src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <nav class="standard-nav"> 
 
     <ul> 
 
     <li>Link 1</li> 
 
     <li>Link 2</li> 
 
     <li>Link 3</li> 
 
     <li>Link 4</li> 
 
     <li class="special-link">Special Link</li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 
</header>​

Answer 2

は、フレックスの線に沿って何かを試してみてください。もちろん、サポートしているブラウザに応じてプレフィックスを追加する必要があります。

HTML

<header class="page-header header-standard"> 

    <div class="branding"> 
     <img src="http://via.placeholder.com/350x150"> 
    </div> 

    <nav class="standard-nav"> 
     <ul> 
     <li>Link 1</li> 
     <li>Link 2</li> 
     <li>Link 3</li> 
     <li>Link 4</li> 
     <li class="special-link">Special Link</li> 
     </ul> 
    </nav> 

</header> 

CSS

header, 
nav, 
nav ul { 
    display: flex; 
    align-items: stretch; 
} 

nav { 
    flex: 1; 
    justify-content: flex-end; 
} 

nav li { 
    display: flex; 
    align-items: center; 
    height: 100%; 
} 

---

はここJsFiddle例です： https://jsfiddle.net/0xz5of71/1/

Answer 3

あなたはそれが親の高さの上に展開するためulにheight: 100%; margin: 0; line-height: 86pxを追加し、左要素の高さを修正する必要があります。

.page-header{ 
 
\t display: inline-block; 
 
    margin: 0; 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    z-index: 110; 
 
\t background-color: aqua; 
 
} 
 
.header-standard { \t 
 
\t height: 86px; \t 
 
} 
 
.branding{ 
 
\t display: block; 
 
\t float: left; 
 
} 
 
.branding img { 
 
\t height: 60px; 
 
\t margin: 15px 25px; 
 
} 
 
.standard-nav{ 
 
\t height: 100%; 
 
\t display: block; 
 
\t float: right; 
 
} 
 
.special-link { 
 
\t display: inline; 
 
    background-color: #ff5252; 
 
    width: 200px; 
 
\t height: auto; 
 
    text-align: center; 
 
\t margin: 0; 
 
} 
 
.standard-nav > ul > li {  
 
\t bottom: 0; 
 
} 
 
.standard-nav > ul { 
 
    margin: 0; 
 
    line-height: 86px; 
 
    height: 100%: 
 
} 
 
.standard-nav ul li { 
 
\t display: inline-block; 
 
\t padding: 0; 
 
\t margin: 0; 
 
}

<header class="page-header"> 
 
    <div class="header-standard"> 
 
    <div class="branding"> 
 
    \t <img src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <nav class="standard-nav"> 
 
    \t <ul> 
 
    \t \t <li>Link 1</li> 
 
    \t \t <li>Link 2</li> 
 
    \t \t <li>Link 3</li> 
 
    \t \t <li>Link 4</li> 
 
    \t \t <li class="special-link">Special Link</li> 
 
    \t </ul> 
 
    </nav> 
 
    \t 
 
    </div> 
 
</header>​

Answer 4

あなただけその後、あまりにも作品をfloattingせずNAVをテキスト揃え、ロゴをフロートすることができます。

else display:table/flex/gridフロートを避けるためのオプションもあります。

.page-header { 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 1; 
 
    background-color: aqua; 
 
} 
 

 
.header-standard {} 
 

 
body{margin:0;} 
 

 
.branding { 
 
    float: left; 
 
} 
 

 
.branding img { 
 
    height: 60px; 
 
    margin-left: 25px; 
 
} 
 

 
.standard-nav { 
 
    text-align: right; 
 
} 
 

 
.special-link { 
 
    background-color: #ff5252; 
 
} 
 

 
.standard-nav ul li { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.standard-nav ul li a { 
 
    display: inline-block; 
 
    line-height: 60px; 
 
    padding: 0 0.5em 
 
}

<header class="page-header"> 
 
    <div class="header-standard"> 
 
    <div class="branding"> 
 
     <img src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <nav class="standard-nav"> 
 
     <ul> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     <li><a class="special-link" href="#">Special Link</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 
</header>​