HTML - Center List and icon to bottom - html

Question

I'm starting to using css grid and flex box but I have a problem trying to align this list to the center.
Here is the codepen and snippet:
* {
box-sizing: border-box;
}
.container-shell {
background: gray;
display: -ms-grid;
display: grid;
grid-template-areas: "nav content content";
-ms-grid-columns: 60px 1fr;
grid-template-columns: 60px 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
height: 100vh;
}
nav {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: nav;
background-color: #fff;
}
main {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-area: content;
}
.navigation-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.navigation-flex-item {
flex: 1 0 50%;
text-align: center;
padding: 10px;
min-width: 0;
}
ul {
list-style: none;
margin: 0;
}
.--no-padding {
padding: 0 !important;
}
.--bottom {
align-self: flex-end;
}
.navbar-toggle {
margin: 14px 5px 14px 0 !important;
border: 0 !important;
transition: all .1s linear !important;
cursor: pointer;
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 33px;
margin-bottom: 33px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rec(0, 0, 0, 0);
border: 0;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #888;
}
.icon-bar {
width: 30px;
height: 3px;
background-color: #000;
border-radius: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all .1s linear;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.icon-bar:nth-child(2) {
width: 19px;
margin-left: 11px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
.icon-bar:last-of-type {
width: 19px;
margin-right: 11px;
}
<div class="container-shell">
<nav>
<div style="height: 100%">
<div class="navigation-container">
<ul class="navigation-flex-item">
<li>1</li>
<li>2</li>
<li><svg _ngcontent-c2="" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" style="enable-background:new 0 0 60 60;" version="1.1" viewBox="0 0 60 60" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
<g _ngcontent-c2="">
<path _ngcontent-c2="" d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3
C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5
v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6z
M4,58V17h52v41H4z"></path>
<path _ngcontent-c2="" d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7
V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7
v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"></path>
</g><g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
</svg>
</li>
</ul>
<div class="navigation-flex-item --bottom --no-padding">
<button class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
</nav>
<main>
Hello World Content!
</main>
</div>
As you can see the hamburger icon aligned to the center which is fine but the text (list) is aligned to the left, how can I center the text and the image without break the hamburger icon. I already tried with align and justify.

Answer 1

Have made the below changes to your code:
The default flex-direction is row - you have to change it to column for the navigation-container.
Remove flex: 1 0 50% from the element navigation-flex-item.
Absolutely position the hamburger to the bottom.
See code below:
* {
box-sizing: border-box;
}
body {
background: blue; /* for illustration */
}
.container-shell {
background: gray;
display: -ms-grid;
display: grid;
grid-template-areas: "nav content content";
-ms-grid-columns: 60px 1fr;
grid-template-columns: 60px 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
height: 100vh;
}
nav {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: nav;
background-color: #fff;
}
main {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-area: content;
}
.navigation-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* ADDED */
height: 100%;
}
.navigation-flex-item {
/*flex: 1 0 50%;*/
text-align: center;
padding: 10px;
min-width: 0;
}
ul {
list-style: none;
margin: 0;
}
.--no-padding {
padding: 0 !important;
}
.--bottom {
/*align-self: flex-end;*/
position: absolute; /* ADDED */
bottom: 0; /* ADDED */
}
.navbar-toggle {
margin: 14px 5px 14px 0 !important;
border: 0 !important;
transition: all .1s linear !important;
cursor: pointer;
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 33px;
margin-bottom: 33px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rec(0, 0, 0, 0);
border: 0;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #888;
}
.icon-bar {
width: 30px;
height: 3px;
background-color: #000;
border-radius: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all .1s linear;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.icon-bar:nth-child(2) {
width: 19px;
margin-left: 11px;
}
.icon-bar+.icon-bar {
margin-top: 4px;
}
.icon-bar:last-of-type {
width: 19px;
margin-right: 11px;
}
<div class="container-shell">
<nav>
<div style="height: 100%">
<div class="navigation-container">
<ul class="navigation-flex-item">
<li>1</li>
<li>2</li>
<li><svg _ngcontent-c2="" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" style="enable-background:new 0 0 60 60;" version="1.1" viewBox="0 0 60 60" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
<g _ngcontent-c2="">
<path _ngcontent-c2="" d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3
C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5
v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6z
M4,58V17h52v41H4z"></path>
<path _ngcontent-c2="" d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7
V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7
v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"></path>
</g><g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
<g _ngcontent-c2="">
</g>
</svg>
</li>
</ul>
<div class="navigation-flex-item --bottom --no-padding">
<button class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
</nav>
<main>
Hello World Content!
</main>
</div>