html/cssのdiv内での画像配置の変更、余白部分の調整について

Question

前提・実現したいこと

本質問内の下部に現状画像にある通り、画像配置を中央配置にしたいと考えています。
また、<div.icon> 内にある画像下部の隙間を解消したいと考えています。

発生している問題・エラーメッセージ

該当のソースコード

##[HTML]

<header>
    <div class="container">
<div class="info">
  <h1>PORTFOLIO</h1>
  <p>ささみさん</p>

</div>
      <div class= "icon">
        <img src= "img/free1.jpg" height= "400" width="300" alt=”Chinpan画像”>
        
      </div>
    </div>
  </header>

###CSS ※コード一部抜粋

header{
  background-color:orange;
display: flex;
}
.container {
  margin-left: auto;
  margin-right: auto;
  background-color: orange;
}

試したこと

<div class＝"icon">や"container"等でCSS試していました。

Comments

[dit.]

teratailには質問を見やすくするための仕組みがあります。
```html
ここにHTMLのコードを記載
```
1行以上あける
```css
ここにCSSのコードを記載
```
の形にしてください。
質問は編集できます。コードの部分を選択し、<code>というボタンを押すことでも可能です。

[dit.]

alt=”Chinpan画像”のダブルコーテーションは実際のコードでも全角になってますか？

[sasamiwarabi]

返信ありがとうございます。
全角になってました。修正しました。

[Lhankor_Mhy]

ご提示のコード、headerがふたつあるので、間違っているんじゃないかな、と思いました。

[sasamiwarabi]

コメントありがとうございます。質問内容に不備がありました。実際の内容はヘッダーは一つなので、質問内容には直結はしてないはずですので宜しくお願い致します。

Answer 1

#画像を中央に寄せる
.icon側のCSSが提示されてないので何とも言えませんが、

/* .iconの中全部中央 */
.icon{
  text-align:center;
}

とか

.icon img{
  margin:auto;
  display:block;
}

#隙間をなくす
よくある画像隙間問題の対処法は「画像の下に隙間 対処」でググるだけでも結構出てきます。

img{
	display: block;
}

とか

img{
  vertical-align: bottom;
  /* ↑でもダメならこれも追加 line-height:1; */
}

参考

Answer 2

周辺のHTMLコードにもよりますが、以下はどうでしょうか。

.icon img {
	display: block;
	margin: auto;
}