width指定していないのに画面幅いっぱいに要素が広がる

Question

前提・実現したいこと

footer内のテキストを真ん中にしたいです。

発生している問題・エラーメッセージ

サイズ指定していないのに画面幅いっぱいに要素があります。

<footer>
	
<img src="images/logo.png" alt="" class="footer_logo">
	
	<p class="footer_text">サイトタイトル</p>

</footer>

*{
    margin:0;
	padding:0;
	box-sizing: border-box;
	color:#6c6c6c;
}

p{
	letter-spacing: 0.05em;
}

footer{
    background-color: #BEABEC;	
	padding:1em 1em 0.5em 1em;
	color:#fff;
}

.footer_logo{
    width: 10%;
    margin: 1em auto;
    text-align: center;	
}

![イメージ説明](bda8ae28a5a9fbfd2c8d143bfd309073.png)

試したこと

サイトタイトルにはなにも指定していないですが、　margin:0 auto;　や　text-align: center;　が効かず、サイトタイトルの後ろに謎の空白が画面幅いっぱい（paddingは除く）にある感じです。

補足情報（FW/ツールのバージョンなど）

Dwで制作しています。
コード

Answer 1

footer にtext-align: center; を設定すれば効くと思いますが。

footer {
    background-color: #BEABEC;    
    padding:1em 1em 0.5em 1em;
    color:#fff;
    text-align: center; /* 追加 */
}

text-align: center; は設定した要素内のインラインコンテンツを中央寄せしますので、中央寄せしたい要素の親要素に設定します。img はインライン要素なので効きます。

pはブロックレベル要素ですので幅を設定しなければ親要素の幅一杯に広がります。
ただ、text-alignは継承しますので、子要素のテキスト（インラインコンテンツ）にはtext-align: center; が効きますので、中央寄せになります。

Comments

[higashi_student]

解決しました！ありがとうございました！