I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells.
http://jsfiddle.net/digorydoo/j2v5m7gr/
I can't seem to pinpoint what's causing the issue with my current layout.
HTML:
<div class="outer-frame">
<div class="nav-frame">
<div class="nav-cell">
<div class="nav-icon">🏠</div>
</div>
<div class="nav-cell">
<div class="nav-icon">💊</div>
</div>
<div class="nav-cell">
<div class="nav-icon">🎫</div>
</div>
</div>
</div>
CSS:
/* box around everything */
.outer-frame {
position: relative;
/* origin for absolute pos'ed children */
margin-left: auto;
margin-right: auto;
margin-bottom: 12pt;
width: 200px;
height: 190px;
border: 1px solid #f0f0f0;
background-color: #fafafa;
}
/* grey area to the left */
.nav-frame {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
width: 36px;
height: 100%;
background-color: grey;
}
/* the outer container of the icon */
.nav-cell {
position: relative;
display: block;
box-sizing: border-box;
width: 36px;
height: 38px;
background-color: yellow;
margin-top: 4px;
}
/* the inner container of the icon */
.nav-icon {
display: block;
background-color: white;
border: 1px solid orange;
width: 8px;
height: 8px;
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}