Q&A
前提
実現したいこと
ロゴのimgタグを中央に揃えたい。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
imgタグはインライン要素だから、その親要素であるdivタグの#logoにtext-align: center;を指定したのですが、左寄せのままになってしまう。
該当のソースコード
<head> <meta charset="utf-8"> <title>Cake House</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>洋菓子専門店「ケーク」大阪 阿倍野 帝塚山</h1> <header> <div id="logo"> <img src="./ケーキ大好き_files/logo.svg" alt="ケーキのロゴ"> </div> </header> <div id="info"> <h2>ケーキハウス「ケーク」へようこそ</h2> <p>このサイトでは、人気のケーキを紹介します。</p> </div> ここからcss↓ @charset "UTF-8"; body { font-family: sans-serif; } h1 { background-color: #eee; font-size: 0.75rem; font-weight: normal; text-align: center; } #logo { width: 30%; text-align: center; } img { width: 100%; } h2 { font-size: 1.188rem; } #info { border-top: solid 1px #eee; border-bottom: solid 1px #eee; text-align: center; }
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
練習用のサイトと同じになるように作っているのですが、そのサイトだと#logoにmargin: 0 auto;を指定していました。
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
imgがwidth: 100%;となっている以上、親要素である#logo全幅を埋め尽くすように表示されます。
#logoの中でtext-alignを指定しても、左揃えだろうが中央揃えだろうが、100%を占める以上何も変わりません。
投稿2023/01/29 13:46
総合スコア142194
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/29 14:38
2023/01/29 14:50