0
私のヘッダーはleft,centerおよびrightの3つのセクションに分かれています。 leftセクションは空です。 centerセクションで私は自分のページタイトルを持っていて、rightセクションには、隣にアイコンがある「アカウント」リンクがありました。リンクには、「アカウント」とアイコンが含まれています。アイコンは何とか上部にプッシュされ、単語の隣に空白のスペースが残されます。私はそれらを一本の線と同じ高さの両方で欲しい。どうすればこれを達成できますか？私は問題をより理解しやすくするために赤い背景を追加しました。ヘッダーアライメントのアイコン付きリンク
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
で.navigationiconで2,2か？ https://imgur.com/a0g8ph9 –
はい、スニペットを全画面で開きます。私は小さなデバイスのためのCSSを含んでいません –
'＃right'（私のテストでは25％の幅が働いています）にさらにスペースを追加し、' .navigationicon'を 'float：right;'に設定します。それはそれを行う必要があります。 https://i.imgur.com/xI39Ov6.png –