Divs won't center vertically, why not?

Question

I'm having trouble with a simple layout for a navigation bar. The icons of the bar are supposed to be both horizontally and vertically centred in their cell.

http://jsfiddle.net/digorydoo/j2v5m7gr/

I just can't figure out what's wrong with my layout.

HTML:

<div class="outer-frame">
    <div class="nav-frame">
        <div class="nav-cell">
            <div class="nav-icon">&#127968;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#128138;</div>
        </div>
        <div class="nav-cell">
            <div class="nav-icon">&#127915;</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;
}

I don't even bother trying to figure out what's wrong with my vertical CSS2 alignment anymore. I just skip straight to flexbox layout and save myself a ton of misery. If you can, I'd use it. It will Just Work for this kind of thing. — Jez, Dec 09 '14 at 17:01
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Paulie_D, Dec 09 '14 at 17:02
i've read that post, but they use display: table-cell in the answer, which i'm trying to avoid. besides, i want to know how this thing works in my case, because it's a recurring problem, i always run into this sooner or later... — digory doo, Dec 09 '14 at 17:04
@j08691: thanks, cool! at least one of the two problems solved, but the icons still aren't centred over their white box. but WHY does setting position:absolute work??? — digory doo, Dec 09 '14 at 17:06
Put your actual code in the question itself, not just in the Fiddle. — gvee, Dec 09 '14 at 17:10
Do your icons and their containers have a set width and height that won't change? Will you be using something other than `🎫` for your final icons? The way that @j08691 is using absolute positioning causes the DIV to stretch out to to the edges of an ancestor element that has positioning applied. You specified a width and a height so it fills it with margin. I have a feeling that your icon is off center as it is inheriting some of it's characteristics from the current font. — hungerstar, Dec 09 '14 at 17:14
I might be using actual images later, but at the moment these unicodes are what I need. — digory doo, Dec 09 '14 at 17:21

Shomz · Accepted Answer · 2014-12-09T17:16:07.763

1

This is one of the ways to center it vertically and horizontally, you need to position it absolutely, set the margin to auto and all four sides to zero (or an offset, but you need to define it):

position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

See it here: http://jsfiddle.net/j2v5m7gr/7/

The icons of the bar are supposed to be both horizontally and vertically centred in their cell.

Here you go: http://jsfiddle.net/j2v5m7gr/10/ The same approach from above.

edited Dec 09 '14 at 17:16

answered Dec 09 '14 at 17:09

Shomz

37,421
4
57
85

Sorry, I misread your question at first, but you have the working example in my update. – Shomz Dec 09 '14 at 17:16
Thanks a lot! The latter does indeed center the white boxes in their cells. Now I just want to center the Icons over their white boxes. Maybe I'll be able to figure that myself. – digory doo Dec 09 '14 at 17:20
You're welcome! For icon centering, just set the appropriate width and height and they will center automatically: http://jsfiddle.net/j2v5m7gr/11/ – Shomz Dec 09 '14 at 17:25
still not centred in firefox/windows. (of course i could just use offsets or set individual sizes, but i want to avoid that, because it might not look good on a different platform such as android.) – digory doo Dec 09 '14 at 17:30
1

Just realized my Chrome didn't even render the icons, here it is with the new sizes: http://jsfiddle.net/j2v5m7gr/12/ Try tweaking it a bit more. – Shomz Dec 09 '14 at 17:33

Divs won't center vertically, why not?

1 Answers1