画像が真ん中に揃わない

前回社名の隣に電話番号を表示、真ん中に配置するにはどうすればいいか質問をさせていただきました。親切な方に教えてもらって出来たのですが今度はその下に配置した画像が大きすぎるのか社名と電話番号とセンターがズレています。

max-widthやwidthを色々いじってみましたが幅が綺麗に揃いません。。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
	<link rel="stylesheet" href="サンプル１.css">
	
<title>無題ドキュメント</title>
</head>

<body>

<header>
	
  <div class="logocontainer">
<img src="社名ロゴ.png" alt="" width="723" height="197" class="logo"/>
	<img src="電話番号.png" width="723" height="197" alt=""/></div>

	</header>


	<img src="4889996_m.jpg" alt="" width="1920" height="1440" class="resizeimsge"/>
	
	
	
</body>
</html>


@charset "UTF-8";
/* CSS Document */
header{
	width: 100%;
	maxwidth:1000px;
	margin:0 auto;
	text-align: center;
	display: flex;
}

header img{
	max-width: 20%;
	height: auto;
	
}

.logocontainer {
  text-align: center;
	}

.resizeimsge {
	width: 100%;
	max-width: 100%;
	height:auto;
	text-align: center;
	display: flex;
}

kei344

2021/08/09 04:32

HTML/CSSは一部ではなく全体を提示されることをお勧めします。（提示されている箇所以外が影響している可能性があるため）また、スクリーンショットはカメラではなくOS/ブラウザの機能にあるので、それを使うほうが良いです。（反射して撮影者が写っています）【Mac でスクリーンショットを撮る - Apple サポート (日本)】 https://support.apple.com/ja-jp/HT201361 【【Mac】SafariでWebページ全体のスクリーンショットを撮影する方法 | 酔いどれオヤジのブログwp】 https://minatokobe.com/wp/os-x/mac/post-59713.html

_rei_J

2021/08/09 07:52

ご丁寧にありがとうございます！変更できました(^^)

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

回答1件

ベストアンサー

display: flexを使うならtext-align: centerよりjustify-content: centerの方がよいかもしれません。

css
1header{
2	width: 100%;
3	/*maxwidth:1000px; max-width打ち間違い*/
4	margin:0 auto;
5	/*text-align: center; 削除*/
6	display: flex;
7	justify-content: center; /* 追加 */
8}