Div in the sidebar is not centering when using media queries-CodePudding

I use media queries to re-size the width of the sidebar.

However, when the width changes with the window, the icons in the sidebar won't be centered any more. I used item aligne and justify content functions in all the media queries. But it's still not working.

Here is a re-creation of my problem:

          div {
            display: inline-block;
          }
          body {
            background-color: rgb(245, 245, 245);
          }

          @media (max-width: 1000px) {
            .sidebar {
              position: fixed;
              left: 0;
              bottom: 0;
              top: 55px;
              background-color: white;
              width: 72px;
              padding-top: 5px;
            }
            .sidebar-link {
              display: flex;
              flex-direction: column;
              height: 72px;
              width: 72px;
              justify-content: center;
              align-items: center;
            }

            .sidebar-link img {
              height: 24px;
              margin-bottom: 3px;
            }
          }
          @media (min-width: 1000.1px) {
            .sidebar {
              position: fixed;
              left: 0;
              bottom: 0;
              top: 55px;
              background-color: white;
              width: 96px;
              padding-top: 5px;
            }
            .sidebar-link {
              display: flex;
              flex-direction: column;
              height: 72px;
              width: 72px;
              justify-content: center;
              align-items: center;
            }
            .sidebar-link img {
              height: 24px;
              margin-bottom: 3px;
            }
          }
        </style>
      </head>
      <body>
        <nav >
          <div >
            <img src="/icons/home.svg" alt="home button" />
          </div>
        </nav>
      </body>

CodePudding user response：

The width of .sidebar in @media (min-width: 1000.1px) changes to 96px, but the .sidebar-link width is still 72px. The img is still centred inside its parent, but the parent isn’t centred or stretched to full width of the parent. I would just have removed the width from .sidebar-link and see if that helps.

CodePudding user response：

It's because you must use flex on the parent element of the links. If you put a border on your sidebar-link you will understand that your img is center in it, but that sidebar-link is not centered in your side bar.

Here is a proposition :

 <style>
          div {
            display: block;
          }
          body {
            background-color: rgb(245, 245, 245);
          }
          .sidebar-link {
              border: 1px solid grey;
          }
          .sidebar-link img {
              height: 24px;
              margin-bottom: 3px;
          }

          @media (max-width: 1000px) {
            .sidebar {
              position: fixed;
              left: 0;
              bottom: 0;
              top: 55px;
              background-color: white;
              width: 200px;
              padding-top: 5px;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
          @media (min-width: 1000.1px) {
            .sidebar {
              position: fixed;
              left: 0;
              bottom: 0;
              top: 55px;
              background-color: white;
              width: 400px;
              padding-top: 5px;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
        </style>
      </head>
      <body>
        <nav >
          <div >
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Sign-check-icon.png/600px-Sign-check-icon.png?20200929115132" alt="home button" />
          </div>
        </nav>
      </body>