【CSS】画像を中央に配置するにはどうしたらいいですか？

ホームページの更新をしています。
同じページ内で、こういった構成内容です。
①画像A
②テキスト
③画像B

このうち①だけは、なぜかページ中央に画像が配置されているのですが、
②と③は明らかな左寄せになっています。
そのため、スクロールしていくと、途中からバランスが悪い見栄えになります。

①と③のコード構成を見ると、使用する画像の名前以外はまったく変わりません。
※例えば、①だけに真ん中寄せの指示のようなコードはありませんでした。

せめて③だけでも中央寄せにしたいと思い、ネットで調べると、「text-align:center;」というコードを発見しました。そこで、③を構成するコードのうち、
・<img title="111" alt="222" src="333" >　や、
・<div style="position:absolute; top:0%;left:0;width:100%;>
に、上記のコードを追加しましたが、見た目の変化はありませんでした。

どのようにすれば、③を中央寄せできるでしょうか？

ちなみにコーディングの画面(ターミナルというのでしょうか）は、HTMLとCSSで別々に分けていません。
HTMLのコードが書かれている画面に、「img src=」等々、本来は恐らくCSS専用の画面にて設定するような、画像の貼り付けや配置などをいっしょくたに書いています。

No.4 回答者： 暇人の名前 回答日時： 2019/09/28 22:17

vertical-alignというプロパティが有ったはずです。

MDNというサイトが参考になりますのでURLを張っておきます。https://developer.mozilla.org/ja/

No.3 回答者： naokita 回答日時： 2019/09/26 01:46

このカテの回答者は、日本語よりも、HTML/CSSが得意なんだから、ソースを単発抜粋するよりも、そのコンテンツ全体のソースをまるまま提示した方が、正確な解答になるｗ

----------------
position:absolute;というのは、位置を指定して配置しているから、外から何をやっても動かないよ・・・

文章なんだから、<div>ではなく<p>が適切
なので、センター配置は、
<p style="text-align:center;">テキストもじ文字</p>
（#2さんのは古い仕様です）

もっとも単純に、その①②③のコンテンツ全体なら

<p style="text-align:center;">
<img src="xxx.jpg"><br>
テキストもじ文字<br>
<img src="xxx.jpg">
</p>

これだけです。
おそらく、行間が詰まる感じになるので、
<p style="text-align:center; line-height:1.6;">
のように line-height:1.6;で調整した方が良いでしょう。

わかりにくいなら、１行を段落と考えれば良いです。

<div style="text-align:center;">
<p>
<img src="xxx.jpg">
</p>
<p>
テキストもじ文字
</p>
<p>
<img src="xxx.jpg">
</p>
</div>

どちらでも、貴方のHTMLソースよりも簡素化するので、スッキリするでしょう。

No.2 回答者： t_fumiaki 回答日時： 2019/09/25 10:34

いくつか原因が考えられるけど、この手の質問ではurlを貼り付けるのが一番正確に伝わる。

例えば以下でも出来る。③をdivで囲む。

<div align="center">
③の部分を全部
</div>

この回答へのお礼

ありがとうございます！
会社のサイトのため、URLを送るわけにもいかず・・・(;^_^A
しかしこんなシンプルなスタイルでできるんですね。
明日、試してみます。ありがとうございます！

お礼日時：2019/09/25 23:09

No.1 回答者： debu120t 回答日時： 2019/09/25 09:20

状況は見てみないと、文面だけからではわかりませんね。

なので、そもそもどうやって画像を中央に寄せられるのかを説明します。
簡単には２通りあると思います。

▼text-align:centerでやる方法

<div style="text-align:center">
<img src="xxx.jpg">
</div>

というように親要素のdivで囲われた世界がcenterになっていれば、テキストと同じく画像もセンターに寄せられます。
これはHTML上では画像もテキストと同じく「インライン要素」として扱われているためです。

▼margin:0 auto;でやる方法

<div>
<img src="xxx.jpg" style="display:block; margin:0 auto;">
</div>

というように、親要素であるdivには特にスタイルはなくても、imgだけでセンターに寄せる方法です。
imgが「ブロック要素」として扱われている場合にはmarginで中央寄せにすることができます。
上のは例としてimgにdisplay:blockを当ててわざわざ「ブロック要素」にしてあります。

親要素にスタイルを当てて中央寄せする場合には、imgをインラインとして、
img単独で中央寄せする場合には、imgをブロック要素として、
とでも覚えておくといいでしょうか？

imgがもともとのスタイルの影響でブロック要素になってしまっているときはmarginでしかたなく解決しますが、
できれば親要素でスタイルを当てて、親要素内の全部のimgを中央寄せ出来るので簡単です。
HTMLの直書きだとこんなことになりますが、できれば外部のCSSを準備してセレクターでスタイルを当てられるようになるとよいでしょう。
…と言っても一から勉強するなんて大変だもんね。とりあえずの解決ができればと思います。

この回答へのお礼

わかりやすいご回答をありがとうございました！
肝心な、インライン、ブロック要素が不勉強だったため、調べます汗
設定したい要素を、divにコードもといスタイルを設定し、挟むというやりかたなんですね。
margin:autoは初めて見ました。
部署のサイト更新のため、明日出社したら試します。ありがとうございます！

お礼日時：2019/09/25 23:08