ラウンドリスト要素のハイパーリンクを垂直に整列する

2つのdivを持つヘッダーがあります。最初の1つ（左に浮かぶ）は、垂直方向に正しくセンタリングされた単純な水平の順序付けられていない水平リストです（ヘッダーの行の高さは同じです）。高さと縦線の並び：中央）。 2番目のdivは右に浮いていますが、水平方向の順序付けられていないリストもありますが、丸（境界半径：50％）のハイパーリンクとテキストはまったくありません（背景としてアイコンとして使用されます） -画像）。ヘッダーのサイズに関係なく、最初のdivが正しく整列されていますが、2番目のdivは上部にとどまります。ラウンドリスト要素のハイパーリンクを垂直に整列する

マイコード：どのように私は、垂直ラウンドリストの要素を揃えることができ https://jsfiddle.net/mf6yg78f/ ：

#header 
{ 
    background-color: #a3a3a3; 
    color: black; 
    height: 50px; 
    line-height: 50px; 
    vertical-align: middle; 
} 

#header #icons 
{ 
    float: right; 
} 

#header #icons ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#header #icons ul li 
{ 
    list-style-type: none; 
    display: inline-block; 
    float: right; 
} 

#header #icons ul li a 
{ 
    display: inline-block; 
    text-decoration: none; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    background-color: #787878; 
}

あなたはここにコード&結果を確認することができますか？私はフレックスボックスなどから離れていることを好むだろう。

出典

2017-09-30 Vojthas

margin-top: 7px;から#header #iconsを与える。他の選択肢はありません。

body 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: black; 
 
} 
 

 
#wrapper 
 
{ 
 
    width: 80%; 
 
    background-color: white; 
 
    margin: auto; 
 
} 
 

 
#header 
 
{ 
 
    background-color: #a3a3a3; 
 
    color: black; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    vertical-align: middle; 
 
} 
 
#header #links 
 
{ 
 
    float: left; 
 
} 
 

 
#header #links ul 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header #links ul li 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
} 
 

 
#header #links li:before 
 
{ 
 
\t content: " | "; 
 
} 
 

 
#header #links li:first-child:before 
 
{ 
 
\t content: none; 
 
} 
 

 
#header #links ul li a 
 
{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
} 
 

 
#header #links ul li a:hover 
 
{ 
 
    color: red; 
 
} 
 

 

 
#header #icons 
 
{ 
 
    float: right; 
 
    margin-top: 7px; 
 
} 
 
/* icons on the right side, should also be centered vertically */ 
 
#header #icons ul 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header #icons ul li 
 
{ 
 
    list-style-type: none; 
 
\t display: inline-block; 
 
    float: right; 
 
} 
 

 
#header #icons ul li:first-child ~ li 
 
{ 
 
\t margin-right: 10px; 
 
} 
 

 
#header #icons ul li a 
 
{ 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t width: 35px; 
 
\t height: 35px; 
 
\t border-radius: 50%; 
 
\t background-color: #787878; 
 
}

<body> 
 
<div id="wrapper"> 
 
    <div id="header"> 
 
    <div id="links"> 
 
     <ul> 
 
     <li><a href="#">Index</a></li> 
 
     <li><a href="#">Login</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="icons"> 
 
     <ul> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

出典

2017-09-30 11:14:09

それは実際に7.5pxだとそれが唯一の選択肢ではありません。 #header #icons ul {padding-top：7.5px}を設定すると、同じ結果が得られます。 – VXp

はい私はそれを知っていて、パディングやマージンがなければ他の選択肢はないと言っています。 –

あなたはそれがテーブルとして動作するようにテーブルとテーブルセルなどの項目を表示しようとし、その後、フレックス使用したくない場合。 display:table-cellは<td>として動作要素を行いますので、あなたは効果的

それにvertical-align: middleを追加するには、次のスタイルを変更してみてください：

/* icons on the right side, should also be centered vertically */ 
#header #icons ul 
{ 
    margin: 0; 
    padding: 0; 
    height: 50px; 
    display: table; 
    float: right; 
} 

#header #icons li 
{ 
    list-style-type: none; 
    display: table-cell; 
    text-align: right; 
    vertical-align: middle; 
    width: 35px; 
    padding-right: 10px; 
} 

#header #icons ul li a 
{ 
    display: block; 
    text-decoration: none; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    background-color: #787878; 
    margin: auto 0; 
    float: right; 
}

出典

2017-09-30 18:12:30 makoi07

ラウンドリスト要素のハイパーリンクを垂直に整列する

答えて

関連する問題