ヘッダーのh2の文字と右のアイコンを同じ高さに揃えたいのですが
h2の文字を下げようとすると要素ごと下がってしまいます。
指定方法が間違っていると思いますがどこかわかりません。
該当のhtmlとcssの指定方法を教えていただきたいです。
該当のソースコード
<header class="header"> <div class="header-left"> <h2>ここを右のアイコンと同じ高さに</h2> <div class="socialbtn"> <i class="las la-envelope la-2x"></i> <i class="lab la-github la-2x"></i> <i class="lab la-twitter la-2x"></i> </div> </div> <div class="header-right"> <nav class="list"> <ul class="site.map"> <li><a href="#">About</a></li> <li><a href="#jump">Works</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </div> </header> コード ``` ```
レスポンシブcss
@media (min-width:1024px){
.header{
margin:0px 220px;
}
.header-left h2{
text-align: start;
margin-top: 20px;
}
.header-right a{
font-size: 0.8em;
padding-left: 20px;
}
}
.header{
background-color: white;
}
.header-left h2{
width:100%;
text-align: start;
}
.socialbtn{
list-style: none;
display: flex;
justify-content:flex-end;
}
.socialbtn i{
max-width: 33px;
padding:3px;
}
.header-right ul{
display: flex;
list-style: none;
justify-content: flex-end;
margin-top: 10px;
}
.list li{
padding-right: 10px;
}
.header-right a{
color: #000;
text-decoration: none;
font-size: 14px;
}
### 試したこと h2を<div>で囲む。 h2にクラスをつけてcssで指定する ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/19 08:44
2020/01/19 09:11
2020/01/19 09:15
退会済みユーザー
2020/01/19 09:18 編集
2020/01/19 09:23 編集
退会済みユーザー
2020/01/19 09:28