ヘッダーメニューを縦に整列させる方法とアイコンを左に整える

水平メニュータブ（他のhtmlファイルへのリンクで構成）を持つWebページのヘッダーを作成しようとしていますが、メニュータブと同じ水平行にあるアイコンと、アイコンとタブを異なる位置に保ちます（アイコンは左に、タブは右に）。リンクと同じグループからアイコンを移動し、CSSを使用して別々に整列させると、2つのアイコン（アイコンとタブ）が別々の行に表示されます。私は画像タグに直接align属性を使ってみましたが、すべてを左に揃えました。ヘッダーメニューを縦に整列させる方法とアイコンを左に整える

これまでのコードでは、ランダムなロゴ画像を使用しています。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
    <title>[Website-Name] | Home</title> 
</head> 
<style type="text/css"> 
    img { 
     text-align: left; 
    } 
    ul { 
     text-align: right; 
     padding: 0px; 
     margin: 0px 
    } 
    a{ 
     color: white; 
     text-decoration: none; /* remove link underline*/ 
     font-size: 20px; 
    } 
    div/*MENU CSS*/ { 
     background: black; 
    } 

    a:hover /* Change color mouse hover */, 
    a:active { 
     color: orange; 
    } 

    li { /*Space between tabs */ 
     display: inline; 
     padding: 0px 25px 0px 25px; /* distance between menu tabs*/ 
      vertical-align: middle; 
    } 


</style> 
<body> 
    <nav> 
    <div> 
    <img src="icon.jpg">  
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="drawing.html">Drawing</a></li> 
      <li><a href="music.html">Music</a></li> 
      <li><a href="handcrafted.html">Handcrafted</a></li> 
      <li><a href="literature.html">Literature</a></li> 
      <li><a href="search.html">Search</a></li> 
     </ul> 
    </div> 
    </nav> 
</body> 
</html>

だからここに私が行うには、コードとどのようなコードは、（上記の）実際にやっている希望のものを比較した画像です： https://i.stack.imgur.com/hTGob.jpg

そしてここでは、上記のコードで使用されるicon.jpgあるが、： https://i.stack.imgur.com/qW4UU.jpg

ありがとうございます、私に明確にしたいことがありますか？

出典

2017-06-06 Grace Sawyer

私はCSSで画像に垂直整列を追加するときは、IMG –

に@MarkoMackicを垂直整列真ん中を与え、それは何もしないとも私は垂直タブ位置を合わせしようとしています、イメージではありません。 –

縦型アラインメントは、奇数または偶数型のどちらの場合でも機能しないようです。 –

li { /*Space between tabs */ 
    display: inline-block; 
    padding: 0px 25px 0px 25px; /* distance between menu tabs*/ 
    vertical-align: central; 
    line-height:100%; 
    height:100%; 
} 
a{ 
    display: inline-block; 
    line-height:100px; 
    height:100%; 
} 
div/*MENU CSS*/ { 
    background: black; 
    height:100px; 
} 
img { 
    text-align: left; 
    height:100px; 
} 
ul { 
    text-align: right; 
    padding: 0px; 
    margin: 0px; 
    float:right; 
    height:100%; 
}

次のCSS要素を交換し、これは画像の高さは100pxにはとてもあなたがあるあなたのDIVのための以下の設定でフレキシボックスを使用することができます

出典

2017-06-06 23:33:24

これらのプロパティを追加するだけでタブを非表示にし、アイコンだけを表示します。 –

申し訳ありませんが、私は仮定をしていた、私はちょうどテストし、私は私が –

待ちを、編集しますが、固定画像の高さですか？その場合私は答えがある –

あなたのイメージの実際の高さにその出現をすべて変更されていると仮定しますnav内側：

（注：私はパディングを削減ので、すべてのメニュー項目が隣同士にスニペットの未亡人に収まるでしょう）

nav>div { 
    height: 100px; 
    display: flex; 
    align-items: center; 
}

nav>div { 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
img { 
 
    text-align: left; 
 
} 
 

 
ul { 
 
    text-align: right; 
 
    padding: 0px; 
 
    margin: 0px 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    /* remove link underline*/ 
 
    font-size: 20px; 
 
} 
 

 
div 
 
/*MENU CSS*/ 
 

 
{ 
 
    background: black; 
 
} 
 

 
a:hover 
 
/* Change color mouse hover */ 
 

 
, 
 
a:active { 
 
    color: orange; 
 
} 
 

 
li { 
 
    /*Space between tabs */ 
 
    display: inline; 
 
    padding: 0px 10px 0px 10px; 
 
    /* distance between menu tabs*/ 
 
}

<nav> 
 
    <div> 
 
    <img src="http://placehold.it/50x40/fa0"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="drawing.html">Drawing</a></li> 
 
     <li><a href="music.html">Music</a></li> 
 
     <li><a href="handcrafted.html">Handcrafted</a></li> 
 
     <li><a href="literature.html">Literature</a></li> 
 
     <li><a href="search.html">Search</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

出典

2017-06-07 00:11:30 Johannes

興味深い。あなたはflexが何をしているのか説明できますか？私はこの作品を作ることをよく理解しているとは思わない。 –

まず、直接的な子要素を軸に沿って（水平または垂直に）コンテナに配置します。他の設定では、子要素の分布（開始点、終了点、均等に広がる）、子要素の自動縮小または拡大、および交差軸に沿った配置（スニペットの垂直方向のセンタリングなど）に影響を与えることができます。そのような短い答えのためには本当にあまりにも多くのものですが、それは非常に柔軟です - ちょうどGoogleの "フレックスボックス"、チュートリアルや記事がたくさんあります。唯一の欠点は、古いブラウザでは互換性がないことです。 – Johannes

ヘッダーメニューを縦に整列させる方法とアイコンを左に整える

答えて

関連する問題