Flexbox not vertically centering inline-block spans

Question

I have a dashboard I am setting up that has wrapper blocks with a sprite icon that should be centered vertically and horizontally inside its parent.

I got the blocks to be placed how I want and wrapping how I want using flexbox.

I also have the icon centered horizontally using the text-align property, but for some reason justify-content: center doesn't do anything when I add it to the .view or .sprite-icon elements; adding it to the .views element also doesn't center things how I want and it breaks the padding between the .view blocks.

See my JSFiddle I set up showing the issue here: https://jsfiddle.net/efarley/k0m4nxny/

.views {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.view {
  height: 105px;
  text-align: center;
  width: 105px;
}
.sprite-icon {
  background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
  display: inline-block;
  height: 35px;
  width: 35px;
}
.sprite-icon.one {
  background-position: 0 0;
}
.sprite-icon.two {
  background-position: 0 35px;
}
.sprite-icon.three {
  background-position: 0 70px;
}

<div class='views'>
  <div class='view'>
    <span class='sprite-icon one'></span>
  </div>
  <div class='view'>
    <span class='sprite-icon two'></span>
  </div>
  <div class='view'>
    <span class='sprite-icon three'></span>
  </div>
</div>

score 3 · Accepted Answer · edited May 23 '17 at 10:27

You need to make your view a flex container, then add flex centering properties.

.view {
  height: 105px;
  text-align: center;
  width: 105px;
  display: flex;             /* new */
  align-items: center;       /* new */
  justify-content: center;   /* new */
}

revised fiddle

Note that the justify-content property only applies to flex containers. In your question, you were applying it to a flex item. That's why it failed.

Learn more about flex centering:

score 0 · Answer 2 · answered Sep 19 '16 at 23:34

0

Try these settings:

.sprite-icon {
  display: block;
  position: relative;
  margin: 35px auto;
  background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
  height: 35px;
  width: 35px;
}

margin 35px auto centers it horzontally (when position is relative) and moves it down 35px, which centers it vertically, but only since display is now block. I erased text-align: center in .view

Fiddle: https://jsfiddle.net/0t4vbzxb/1/

answered Sep 19 '16 at 23:34

Johannes

64,305
18
73
130

I'm trying to use flexbox for this so the centering is flexible and not hard coded incase the design changes over time. – efarley Sep 19 '16 at 23:36
flexbox only affects the direct children of the flex container i.e. `.view`, and only block elements, so it doesn't do anything on your `span` elements It still distributes the `view`elements evenly, though, in which i centered the `sprite-icon`s – Johannes Sep 19 '16 at 23:38

Flexbox not vertically centering inline-block spans

2 Answers2