CSS - Aligning the child of a flex container to center of screen not working properly - Photoshop

Sensanaty
March 15, 2019
152 views
3 votes
3 Answers

I’m making a small Etch-a-Sketch-esque webpage.

For now, I’m just trying to get the CSS of the page right before moving onto the Javascript that will generate a canvas of a designated size, so I’m working with a 16×16 grid of divs statically on the webpage.

See this codepen for what I have so far. Sorry about the ridiculously long HTML, as I said for now I’m just working on the formatting and put in a 16×16 grid (800px by 800px) of divs with class .tabletCanvas. Basically, just 256 divs that have that class.

As you can see, the “canvas” is sticking to the left-hand side, and I want it to look like it does in this picture (very rough outline done in 5 minutes using photoshop).

What I’ve tried so far:

Many different values for flex:. What happens is that, without setting a max-width or max-height (from my understanding of flexbox, specifying specific heights and widths defeats the purpose of using it and that everything should be handled through the flex: property), the grid will simply overflow to the right and fill up the rest of the screen. Obviously not ideal, as I want it contained within the 800×800 pixels, and even after specifying the max-width and height, it will still hang to the left.
Making the tabletContainer a flex parent (container) itself, and trying all possible variations of align-content, align-items and justify-content within it. None of them had a visible effect
Many different values of align-self, justify-self on the .tabletCanvas class.
One thing that sprung to mind would be absolutely positioning the canvas div, but this defeats the purpose of using a flex container in the first place, I imagine

Something that I think might work would be to use the align-content or align-items properties on the #bodyWrapper to get all of its children to be centered, however if I do this then I risk ruining the flow of every other property and putting myself more or less back to square one where I started.

Another thing that sprung to mind was just to add a lot of padding-left to the #sketchButtons, however this also seems like a hilariously wrong and hacky approach to take.

Any and all help will be greatly appreciated.

Tags: css flexbox

Answers

I made a jsfiddle draft of your case with a simplified styling. I hope you can analyse the code and spot the approach.

In a nutshell it’s just a centered flex column and absolutely positioned menu.

html, body {
  width: 100%;
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}


.content {
  display: flex;
  justify-content: center;
 
  width: 100%;
  height: 100%;
  
  position: relative;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50%;
  height: 50%;
  
  border: 1px solid black;
}

.menu {
  display: flex;
  flex-direction: column;
  
  position: absolute;
  left: 10px;
  top: 0;
}

<div class="app">
  <h1>Header</h1>
  <div class="content">
    <nav class="menu">
      <button>Menu item</button>
      <button>Menu item</button>
      <button>Menu item</button>
    </nav>
    <div class="grid">Grid</div>
  </div>
</div>

- DesTroy
- March 15, 2019 at 9:47 am
- 0 votes
0
One way to do it would be to:
set .tabletContainers position to absolute,
set margin to auto,
set left and right to 0,
and then set your top property as desired.
```
 .tabletContainer {
    position: absolute;
    color: white;
    padding: 5px;
    margin: 5px;
    max-width: 800px;
    display: flex;
    flex-flow: row wrap;
    margin: auto;
    left: 0;
    right: 0;
    top: 111px;
}
```
Login or Signup to reply.

If you are just looking to center your grid horizontaly, here is a simple solution :

#tabletContainer {
  margin: auto; /* Center the tableContainer horizontaly */
}
#header {
  padding-left: 190px; /* The width of your sidebar, to align it with the tableContainer */
}

body {
  background-color: #222219;
  font-family: 'Open Sans', sans-serif;
}

#header h1 {
  color: #F9C80E;
}

#bodyWrapper {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
}

#header {
  flex: 1 100%;
  align-self: baseline;
  text-align: center;
  padding-left: 190px; /* The width of the sidebar */
}

#sketchButtons {
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-flow: column nowrap;
  padding: 15px;
  margin: 5px;
}

.appButtons {
  padding: 10px 5px;
  margin: 5px;
  border-radius: 15px;
  outline: none;
  background-color: #424729;
  color: white;
  border: none;
  cursor: pointer;
}

.appButtons:hover {
  background-color: white;
  color: #424729;
}

.appButtons:active {
  transform: translateY(4px);
}

#tabletContainer {
  color: white;
  padding: 5px;
  margin: 5px;
  max-width: 800px;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto; /* Center it */
}

.tabletCanvas {
  box-sizing: border-box;
  float: left;
  min-width: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid #404040;
  background: white;
}

<div id="bodyWrapper">
        <div id="header">
            <h1>Etch-A-Sketch!</h1>
        </div>
        <div id="sketchButtons">
            <button class="appButtons" id="rainbowButton">Random Colors</button>
            <button class="appButtons" id="clearButton">Reset the Grid</button>
            <button class="appButtons" id="blackButton">Default Colors</button>
        </div>
        <!-- Drawing board gets targeted here -->
        <div id="tabletContainer">
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
        </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS – Aligning the child of a flex container to center of screen not working properly – Photoshop

Answers