ボックス枠の中に配置した画像をボックス枠とその中の画像を画面中央に配置したい。

実現したいこと
四角いボックスの枠線の中に画像を配置したいのですが、画像と枠線が左に寄ってしまいます。
付属画像１参考。　これを画面の中央に配置したいです。

参考サイトhttps://1design.jp/web-development/css/1844

の中のabsolute-positionとうコードを参考に書いてみましたが上手くいきません。左に寄りになってしまいます。

あと、ｃｓｓのコードにエラーが出てしまいます。付属画像２参考。カッコのエラーのようですが、書き直してもエラーが消えません。img.example9の部分です。

付属画像１

付属画像２

試したこと
text-align: center;を追加で効果なし。

進めずに困っています。回答よろしくお願いいたします。

html
1<!DOCTYPE html> 
2
3<html lang="ja">
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7
8<link rel="stylesheet" href="lppage1.css">
9
10
11 <title></title> 
12 <style type="text/css">
13   
14</style>
15
16</head>
17<body>
18<section>
19  <h1>absolute-position</h1>
20  <div class="img-container--absolute-position">
21    <img src="formlyric11.PNG" class="example9"/>
22  </div>
23</section>
24
25</body></html>

css
1.img-container--absolute-position {
2  position: relative;
3  text-align: center;
4  width: 600px;
5  height: 350px;
6  border: 1px solid darkgray;
7  img.example9 {
8    position: absolute;
9    left: 0;
10    right: 0;
11    top: 0;
12    bottom: 0;
13    margin: auto;
14  }
15}
16
17img.example9{
18 text-align: center;
19  max-width: 100%;
20  max-height: 100%;
21  width: auto;
22  height: auto;
23}

行動規範の内容に同意します

回答2件

ベストアンサー

text-align: center;に代えてmargin: auto;を指定してみてください。

あと、エラーですけど、SCSSコードとしては問題なさそうに見えます。
SCSSコードはどうやってコンパイルされていますか？
エラーはどのツールがどの時点で出していますか？

投稿2021/08/29 04:16

itagagaki

総合スコア8402

gujhufiugho

2021/08/29 07:24

回答ありがとうございます。 margin: auto;で中央配置になりました。ツールはVisual Studio Codeを使ってコードを書いています。コンパイルは全くしてません。 .img-container--absolute-position {の中にimg.example9{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;/* 追加 */ text-align: center;/* 追加 */ } を追加するとエラーがでます。img.example9{}中身なしにしてもでます。逆にimg.example9｛・・・を全部消すとエラーは消えます。エラーが気になるので、img.example9｛・・・を全部消してみましたが、希望通りの配置はできました。消した方が良いのでしょうか？