Q&A前提・実現したいこと
<a>タグで書かれた"お問い合わせ"という文字を中央に寄せたい
該当のソースコード
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="mosya.css"> <title></title> </head> <body> <header> <img src="sample text.png"> <address> <p>TEL 00-0000-0000<br>(受付時間 9:00~17:00)</p> <a href="#">お問い合わせ</a> </address> </header> </body> </html>該当のソースコード
*{
margin:0px;
padding: 0px;
}
body{
width: 100%;
}
header{
background-color: green;
height:100px;
padding:40px 200px 0px 200px;
}
header img{
float:left;
}
address{
float:right;
}
address p{
float: left;
margin-right: 40px;
}
address a{
float:left;
color: white;
background-color: red;
height:45px;
}
試したこと
vertical-alignやline-heightを調整してみたのですが、全く変化がない状態です。
回答2件
0
float は display 計算値を変えてしまうため vertical-align が効かなくなります。乱用は避けたほうがいいでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/float
CSS
1address a { 2 display: flex; 3 align-items: center; 4}
投稿2020/02/17 06:35
総合スコア13749
0
自己解決
もう一度line-heightをいじってみたところ中央揃えができました。
投稿2020/02/17 06:25
総合スコア5
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。