中央ぞろえが反映されません

中央ぞろえが反映されません。
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>akasa</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: 400px; */

  

  margin-left: auto;

  margin-right: auto;

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

回答2件

以下のコードをコピペしてみてください！中央寄せになるとおもいます！

index.html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6
7    <meta charaset="UTF-8">
8    <title>自己紹介</title>
9    <link rel="icon" href="img/favicon.ico">
10    <meta name="description" content="自己">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <meta http-equiv="X-UA-Compatible" content="ie=edge">
13    <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
14    <link rel="stylesheet" type="text/css" href="styles.css">
15
16</head>
17
18<body>
19    <header>
20        <div class="container">
21            <img src="img/149.JPG" alt="の顔" width="200" height="200">
22            <h1>あいうえお</h1>
23            <p>akasa</p>
24            <ul>
25                <li><ion-icon name="umbrella" style="color: blue; font-size: 50px;"></ion-icon></li>
26                <li><ion-icon name="heart" style="color: black; font-size:50px;"></ion-icon> </li>
27                <li><ion-icon name="heart" style="color: black; font-size:50px;"></ion-icon> </li>
28            </ul>
29        </div>
30    </header>
31</body>
32
33</html>

styles.css
1header{
2
3    background-color: rgb(173, 198, 230);  
4}  
5
6
7.container{
8
9    /* background-color: lightgreen; */
10
11    /* width: 400px; */
12    width: 100%;
13    display: inline-block;
14    text-align: center;
15
16}

原因は、そもそもhtmlファイルの<link rel="stylesheet" href="css/styles.css">のところの書き方が違っていたみたいで、cssファイルを反映できていませんでした。<link rel="stylesheet" type="text/css" href="styles.css">にしたところ反映できました！

あとcssのほうの記述は上記コードのようにwidthを100%で指定して、display: inline-block;にして、text-align: center;にしたら中央寄せになります！

上記コードまるまるコピペしたらちゃんと中央寄せになると思うので是非試してみてください！

投稿2020/05/06 23:43

編集2020/05/07 11:17