前提・実現したいこと
CSSを使って画像(.png)を中央にしたいができないです
したい部分は下記の通りです
HTML↓
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>CSS↓
.logo {
margin: 50px 0 40px 0;
line-height: 0;
text-align: center;
}
HTML全体↓
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>KUJIRA Cafeへようこそ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <header class="header"> <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> <nav class="nav"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> </header> <!-- ヘッダー ここまで --> <!-- メイン --> <div class="keyvisual"> <img src="images/keyvisual.jpg" alt=""> </div> <main> <h2 id="news">News</h2> <p class="news-item">4月29日(土)は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p> <p class="news-item">3月20日(月・祝)は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに!</p> </main> <!-- メイン ここまで --> <!-- フッター --> <footer class="footer"> <p>©Copyright KUJIRA Cafe. All rights reserved.</p> </footer> <!-- フッター ここまで --> </div> </body>CSS全体↓
@charset "UTF-8";
/すべてのWEBページに適用される/
html {
font-family: sans-serif;
}
html * {
box-sizeing: boder-box;
}
body {
background-color: #eeece9;
}
h2 {
color:#3f5170;
font-size:22px;
border-bottom: 3px dotted #3f5170;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
p {
line-height: 1.6;
}
a:link{
color: #d25833;
}
a:visited{
color: #d25833;
}
a:hover{
color: #e3937a;
}
{
a:active{
color: #ff6a3b;
}
/* すべてのページに適用 - ヘッダー - */
.logo {
margin: 50px 0 40px 0;
line-height: 0;
text-align: center;
}
メモ帳でやっているのでエラーメッセージの出し方もよくわかっていません。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/08 13:18