0

I've been trying to do the simple and mundane task of centering divs in CSS with no success.

Here's the code snippet:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

#content {

}

.list-item {
    position: relative;
    display: inline-block;
    border: solid thin #444;
}

.list-item .scene {
    width: 200px;
    height: 200px;
}

.list-item .description {
    width: 200px;
    margin-top: 0.5em;
}

.storyboard-row {
    display: flex;
    /* Method 1 */
    /*justify-content: center;*/
    
    /* Method 2 */
    /*margin-left:auto;*/
    /*margin-right:auto;*/
}
<div id="content">
    <div class="storyboard-row">
        <div class="list-item">
            <div class="description">Scene 1</div>
            <div class="scene"></div>
        </div><div class="list-item">
            <div class="description">Scene 2</div>
            <div class="scene"></div>
        </div><div class="list-item">
            <div class="description">Scene 3</div>
            <div class="scene"></div>
        </div>
    </div>
</div>

What I'm trying to center: The div with class="storyboard-row" in relation to the div with id="content"; and the div with id="content" in relation to its parent (the <body>).

What I tried: In the snippet you will find "Method 1" and "Method 2" which are my attempts at centering stuff around. The first method, using justify-content: center;, works but on downsizing the window, the leftmost squares will be pushed outside off the screen. The second method simply does nothing. Bootstrap can be used.

What I need to continue to happen: Currently the div with class="storyboard-row" has display: flex; which I used so that when downsizing the window, a scrollbar appears instead of pushing down a number of squares (which happens with block). In the snippet, only one row is shown, but the idea is to have multiple (each bellow the former).

EDIT: Thanks to @TemaniAfif the centering problem was fixed. However, because the div with id="content" now has display: flex, when rows are small enough in relation to the screen, they appear on the same line. An updated snipped can be found here: https://jsfiddle.net/hdnz34g8/ If I remove the display: flex from it, the rows appear as intended, line-wise, but they're no longer centered.

Daniel Marques
  • 506
  • 5
  • 20
  • 1
    `display:flex` to `content` then margin:auto to storyboard-row – Temani Afif Feb 19 '20 at 22:44
  • the first duplicate explain the issue you are facing with your centring method and how to fix it. the second duplicate is the canonical one that allow you to center your element using different techniques – Temani Afif Feb 19 '20 at 22:46
  • @TemaniAfif That only works if there is only one row. If there is more than one row, they all appear as one single row due to the display flex on the content. – Daniel Marques Feb 20 '20 at 11:07
  • 1
    consider `flex-wrap:wrap` to have multiple row – Temani Afif Feb 20 '20 at 11:08
  • @TemaniAfif I cannot believe it, it worked! You're a god! Thank you so much! – Daniel Marques Feb 20 '20 at 11:11
  • @TemaniAfif A little bit of a problem with the `flex-wrap:wrap` approach: smaller rows appear on the same height, instead of each row appearing at different heights. An updated code snippet can be found here: https://jsfiddle.net/hdnz34g8/ In this example we have 2 rows, the first with 2 frames and the second with one. On my, fairly big screen, both rows appear on the same line (height). Any idea on how to fix this? – Daniel Marques Feb 21 '20 at 16:22
  • 1
    use `flex-direction: column;` instead of flex-wrap:wrap – Temani Afif Feb 21 '20 at 18:28
  • @TemaniAfif Right again. Thank you so much! – Daniel Marques Feb 21 '20 at 18:50

0 Answers0