質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

text-align: center;が適用されない。

komkom
komkom

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

207閲覧

投稿2023/01/29 11:07

前提

text-align: center;が適用されない。

実現したいこと

ロゴの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

ベストアンサー

imgwidth: 100%;となっている以上、親要素である#logo全幅を埋め尽くすように表示されます。

#logoの中でtext-alignを指定しても、左揃えだろうが中央揃えだろうが、100%を占める以上何も変わりません。

投稿2023/01/29 13:46

maisumakun

総合スコア142194

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

komkom

2023/01/29 14:38

初歩的な質問に答えてくださりありがとうございます。 つまり、#logo自体をmarginで中央揃えにするか、imgにwidth: 30%;指定するかで大丈夫ですか?
maisumakun

2023/01/29 14:50

「imgにwidth: 30%;」は他の画像にも響くし、#logoの幅の30%になってしまうので、おそらく求める結果にはならないと思います。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。