真ん中に社名ロゴと電話番号を横並びでつけたい

htmlとcssでヘッダーに社名ロゴと電話番号を隣り合わせの真ん中寄り配置したいです。

ただ画像が大きすぎるのか横並びになりません。htmlで縮小も出来るのですが、縮小はcssを使った方がいいのでしょうか？

一応サンプルなど参考にしたつもりなのですが全然縮小されませんでした。

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

/*css
header ｛
　　　width: 100%；
　　　max-width: 1000px；
　　　margin: 0 auto；
　　　text-align: center ；
           display: flex；
｝

p.logo img｛
　　　　width｝
コード

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

回答3件

全角空白および記号のほとんどが全角という状況です。
また、「縮小」に類する指定がありませんでした。

CSS
1/* コメント部は特記が無い場合全角 */
2header /*｛*/{
3/*　　　*/width: 100%;/*；*/
4/*　　　*/max-width: 1000px;/*；*/
5/*　　　*/margin: 0 auto;/*；*/
6/*　　　*/text-align: center;/*；*/
7           display: flex;/*；*/
8/*｝*/}
9
10/*p.logo ← imgにクラスが付いているので根本的に間違い */
11header img /*｛*/{
12/*　　　　*//*width ← 指定が無い＆「}」で閉じていない *//*；*/
13    max-width: 100%;
14    height: auto;
15}
16```**動くサンプル：**[https://jsfiddle.net/gfbkjz3s/](https://jsfiddle.net/gfbkjz3s/)

投稿2021/08/08 15:47

kei344

総合スコア69606

_rei_J

2021/08/09 02:31

ここの画像を隣に配置するにはどうしたらいいかの質問にロゴにはpを使うみたいな事が書いてあったと思うのですが私の間違いだったみたいです。。。cssのp.logo imgをheader imgにしたら大きさの指定が出来ました！ありがとうございます！

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

ベストアンサー

※以下は、HTML部分しか見ずに回答したものです。（CSSコードがあるのに気付きませんでした）。

<p>はブロックレベル要素ですので、<p>を並べても横並びにはならず、ブロックが縦に並ぶ形になります。
<p>は段落を意味するタグですが、これを使う意図はあるのでしょうか。無いなら、

HTML
1<div class="logocontainer">
2  <img src="社名ロゴ.png" alt="" width="723" height="197" class="logo"/>
3  <img src＝"電話番号.png" width="723" height="197" alt=""/>
4</div>

CSS
1.logocontainer {
2  text-align: center;
3}

でとりあえず中央で横並びにはなります（ウィンドウの幅に余裕があれば）。
あとはレイアウトの調整になります。別途頑張ってください。

投稿2021/08/08 14:58

編集2021/08/08 16:33

itagagaki

総合スコア8402

_rei_J

2021/08/09 02:25

どうもありがとうございます！<div class="logocontainer">とcssの.logocontainer { text-align: center;}で真ん中寄りになりました！

itagagaki

2021/08/09 02:34

私は header のCSSコードが書かれているのを見逃していましたが、レイアウトのために親要素で display: flex; を使うのは正しい選択だと思います。いろいろやってみてください。

_rei_J

2021/08/09 02:38

はい！ありがとうございます！(^^)

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

cssのp.logo imgをheader imgにしたら大きさの指定が出来ました！

<div class="logocontainer">とcssの.logocontainer { text-align: center;}で真ん中寄りになりました！

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

/*--css--*/
header{
	width: 100%;
	maxwidth:1000px;
	margin:0 auto;
	text-align: center;
	display: flex;
}

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

.logocontainer {
  text-align: center;
}
	
コード

投稿2021/08/09 02:36

_rei_J

総合スコア4