【html,css】画像の下に文字を配置して、中央揃えにしたい

Question

###前提・実現したいこと
html,css初心者です。
htmlで画像の下に文字を配置して、文字を画像に対して中央揃えにしたいです。

###該当のソースコード

<div id="box1"> <img src="img/gazou.png" alt="" width="200" height="219"> <p>文字文字文字</p> </div>

###試したこと
＃box1 {text-align: center;} で中央寄せをしてみたのですが、一応中央揃えはできるのですが、ｐｃ画面全体に対して中央になってしまいます。

画像に対しての文字のみ中央揃えにして、ｐｃ全体に対しては左揃えで配置したいです。

###補足情報
わかりにくい説明で申し訳ありませんが、ぜひ教えていただけると助かります。
よろしくお願い致します。

Answer 1

やり方は何通りかありますが、
以下質問者さんにとって改変しやすいと思われるhtmlにしてみました。

<style type="text/css" media="screen">
	.box2{
		width:200px;
		height:auto;
		margin:0;
		text-align:center;
	}
</style>

<div id="box1">
	<div class="box2">
		<img src="img/gazou.png" alt="" width="200" height="219">
		<p>文字文字文字</p>
	</div>
</div>

Answer 2

<div class="box1">
	<img src="https://placehold.jp/24/cc9999/993333/350x150.png" alt="">
	<p>文字文字文字</p>
</div>

.box1 {
	display: inline-block;
	text-align: center;
}
```**動くサンプル：**[https://jsfiddle.net/ry1qmm6u/](https://jsfiddle.net/ry1qmm6u/)

---

デベロッパーツールを使うとHTML/CSSの状態を確認しながらコーディング出来ます。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
[http://gihyo.jp/dev/feature/01/devtools/0001?page=2](http://gihyo.jp/dev/feature/01/devtools/0001?page=2)

Answer 3

divは横幅を指定しないと、画面一杯までエリアを広げるボックスです。

もしレイアウトでよくわからなくなったら
.border{
border:1px solid #000;
}
を作ってはめ込んでみて視覚的に確認することをお勧めします。
（自分が下手くそなのでよく使います。

もし画像の横幅が決まっているのなら、その外側のdivを同じ幅にしましょう。

画像の横幅が200pxの時

.box1{
  width:200px;
  text-align:center;
}

すると、なにも指定していない画像は自身のサイズを超えない範囲で横幅いっぱいに広がろうとします（もし画像の横幅が100pxなら、そこまで）。

結果として、
・横幅200pxのdivに
・横幅200pxに広がった画像
・divの中央に配置された文字（＝これが画像の下中央となっているように見える
が得られます。

Comments

[ren_123]

widthを指定してから、text-align:centerにすることで、div内のみで中央揃えにできました。
皆さん、ご回答ありがとうございます！