Need help centering DIVs in FlexBox

HTML & CSS
1

I’m working on a small project:

https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT

I am trying to center the block as shown in the picture.

Here is my code:

<style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body {
      background-color: hsl(210, 46%, 95%);
    }
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      height: 200px;
      width: 800px;
      margin: auto;
    }
    img {
      width: 200px;
      height: 200px;
    }
  </style>

<body>
  <div class="flex-container">
    <div class="img-section">
      <img src="images/drawers-square.jpg"/>
    </div>
    <div>
      <p>Shift the overall look and feel by adding these wonderful 
      touches to furniture in your home</p>

      <p>Ever been in a room and felt like something was missing? Perhaps 
      it felt slightly bare and uninviting. I’ve got some simple tips 
      to help you make any room feel complete.</p>

      <p>Michelle Appleton</p>
      <p>28 Jun 2020</p>
      Share
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
</body>

My code doesn’t center the block, it just moves the text slightly. Does anyone know why?

Thanks a lot!

2

Hi bmcode,

The block (flex-container) does center in a wide viewport, if I read your code right.

My code doesn’t center the block, it just moves the text slightly.

Please post a screen shot as the code seem alright, but I can be wrong. :slight_smile:

1 Like
4

Thanks for your response.

It does center it horizontally, but not vertically like the image at the beginning of my post.

I was trying to follow this:

5

The code in that example centers a div inside the flex-container just as your code does.

The difference is that you seem to expect the flex-container itself should center too.

Test to apply flex-box to the parent of the flex-container, the body, and see if that works as you want:

    body {
      background-color: hsl(210, 46%, 95%);
      min-height:100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
2 Likes
7

That works! I did it slightly differently and added another DIV because I wanted to keep some info at the bottom.

Here is my final code:

  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body {
      background-color: hsl(210, 46%, 95%);
    }
    .main-container {
      display: flex;
      justify-content: center;
      align-items: center;    
      min-height:100vh;
    }
    .flex-container {
      display: flex;
      background-color: white;
      height: 200px;
      width: 800px;
      margin: auto;
    }
    img {
      width: 200px;
      height: 200px;
    }
  </style>

<body>
  <div class="main-container">
    <div class="flex-container">
      <div class="img-section">
        <img src="images/drawers-square.jpg"/>
      </div>
      <div>
        <p>Shift the overall look and feel by adding these wonderful 
        touches to furniture in your home</p>

        <p>Ever been in a room and felt like something was missing? Perhaps 
        it felt slightly bare and uninviting. I’ve got some simple tips 
        to help you make any room feel complete.</p>

        <p>Michelle Appleton</p>
        <p>28 Jun 2020</p>
        Share
      </div>
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
</body>

Thanks for your help! :slightly_smiling_face:

1 Like
8

One more question, what does min-height:100vh; do exactly?

9

Well done! :+1:

As it says it is a minimum height and the value is related to the viewport height:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

The Mozilla Web Docs site is a good source both for tutorials (more adequate than w3schools) and web tech references.

2 Likes
10

Note that if you give your main-container min-height:100vh and you haven’t negated the margins on the body then main-container will extend past the bottom of the viewport when it may not need to as it will not start at the very top of the body…

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.