中央ぞろえにできません

中央ぞろえが反映されません。
Css内の.container のところでmarginのleft right をauto に設定し中央ぞろえにしようとしましたが反映されませんでした。

しかし、現時点ではコメントにしている.container内のbackground colorとその
width を400pxにし、marginのleft right をautoにすると中央ぞろえが反映されます。widthを設定しないと反映されません。
また、background color をコメント状態にし、margin-left を何pxにしても反応しますが、margin rightは何pxに設定しても動きません。
個人的にはmargin rightの方に問題があるのかなと思っているのですが解決策がわかりません。


<html lang="ja">

<head>

  <meta charaset="utf8">

  <title>自己紹介</title>

  <link rel="icon" href="img/favicon.ico">

  <meta name="description" content="自己">

  <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

  <link rel="stylesheet" href="css/styles.css">

</head>

 

<body>

  <header>

      <div class="container">

      <img src="img/149.JPG" alt="ひとの顔" width="200" height=200>

      <h1>あかさたな</h1>

      <p>bloger</p>

      <p>webmarketer</p>

      <ul>

        <li><ion-icon name="umbrella" style="color: blue; font-size: 50px;"></ion-icon></li>

        <li><ion-icon name="heart" style="color: black; font-size:50px;"></ion-icon> </li>

      <li><ion-icon name="heart" style="color: black; font-size:50px;"></ion-icon> </li>

      </ul>

    </div>

  </header>

</body>

</html>

header {
    background-color: rgb(173, 198, 230）;

}

.container{

  /* background-color: lightgreen; */

  /* width: 300px; */

 margin-left: auto;

 margin-right: auto;

}

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

回答1件

コメントアウトをしていますが、widthが必要です。

CSS
1.container{
2 max-width: calc(100% - 10px - 10px); /* 左右の余白が10px */
3 width: 600px; /*好きな値を設定してください*/
4 margin-left: auto;
5 margin-right: auto;
6}

別件ですが、末尾の「)」が全角文字になってしまっています。
後ろの記述でバグが生じてしまっているかもしません。

変更前: background-color: rgb(173, 198, 230）;
変更後: background-color: rgb(173, 198, 230);

投稿2020/05/03 19:20

編集2020/05/03 23:12

new1ro

総合スコア4528

teruyoru

2020/05/03 19:23

ドットインストールではmargin のレフトライトのautoで中央ぞろえにできるとあったのですが、なぜwidthがあるのですか？

teruyoru

2020/05/03 23:21

直してみたのですが中央ぞろえにはならなかったです。

new1ro

2020/05/03 23:26

> margin のレフトライトのautoで中央ぞろえにできるほんとうに上記のように書いているのであれば、説明不足です。 > margin のレフトライトのautoで中央ぞろえにできる > (display: block;の場合はwidthが必要。display: flex;の場合はwidthは不要) ↑自分ならこのように書きます。 -------------------------------------------------- 何も指定しないと、<div>などdisplay: block;が指定された要素は横幅いっぱいになります。 (width: 100%;が指定されているイメージです。厳密には違いますが。) `margin-left: auto;`と`margin-right: auto;`が指定されている前提で、 `width: 100%;`が指定されている要素の左右のmarginの値はいくつになりますか? 横幅の余りがないため0pxとなります。今度は`width: 90%;`を指定した場合を考えます。横幅の余りは10%なので、それを左右で分配した5%が、左右のmarginの値になります。上記、%で説明しましたが、pxでも同様です。

new1ro

2020/05/03 23:27

> 直してみたのですが中央ぞろえにはならなかったです。回答にも書きましたが、 background-color: rgb(173, 198, 230）; の末尾の「）」が全角文字になってしまっています。半角文字にしてください。

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