Vertically centering an inline-block element

Question

I'm trying to design a flash message popup, similar in style to what StackOverflow itself uses -

They accomplish it by floating the message to the left and floating the close button to the right. They also "center" the close button vertically by giving it a fixed margin-top as shown in the diagram.

My flash message is slightly different in that the message is centered.

At a high level I approached it as follows -

Message and close button are 2 <div>s that are displayed as inline-block
The message takes up the middle 80% of the width, which leaves 10% on each side. There's a margin-left of 10% for this reason.
The close button naturally takes up the rightmost 10%
I didn't use float: right because I know there's some difficulty in vertically centering floated elements.

I'm having the hardest time vertically centering the close button, as shown above. It just hugs the bottom.

My HTML and CSS are below - is there any straightforward way to accomplish this?

Thank you!

HTML:

<div id="flash" class="center active error">
  <div class="flash-message">
    Please enter an email. Please enter an email. Please enter an email. Please enter an email. Please enter an email. Please enter an email.
  </div>
  <div class="flash-close">x</div>
</div>

CSS:

// Flash messages
#flash {
  // Display it as an offset from the parent <body> tag
  position: absolute;
  display: block;
  top: 4em;
  left: 0;
  right: 0;

  // Center it on the page
  width: 50%;
  text-align: center;

  z-index: 101;
  line-height: 2.5;
  overflow: hidden;

  // Cool shadows
  -webkit-box-shadow: 0 0 5px $black;
  -moz-box-shadow: 0 0 5px $black;
  box-shadow: 0 0 5px $black;
  border-radius: 3px;

  // Set color based on message type
  &.error { background: $mustard; }
  &.notice { background: $light-green; }

  .flash-message {
    display: inline-block;
    width: 80%;
    padding-left: (100% - 80%)/2;

    // Give it 3px on the top and bottom for some space
    margin: 3px 0;
  }

  .flash-close {
    display: inline-block;
    // This doesn't seem to do anything.... -_-
    // I've also tried auto-setting margins, and making it `position: relative`
    // so I can set top/bottom as 50%
    vertical-align: middle;

    // Give it 3px on the top and bottom for some space
    // Also 11px from the right edge
    margin: 3px 11px 3px 0;

    // Styling the "X" and the box around it
    padding: 2px 6px;
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: $white;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.2);
  }
}

I think you need to specify `height: 100%` for both of your nested divs — bitfiddler, Apr 11 '16 at 01:29

score 1 · Answer 1 · answered Apr 11 '16 at 01:33

1

You can try centering using flexbox.

#flash {
  display: flex;
  align-items: center;
  justify-content: center;
}

Additional information: Flexbox

answered Apr 11 '16 at 01:33

Xzandro

957
6
14

Agreed, it seems much simpler here. code4pi had a similar solution as well which seems to work. Thank you very much! – user2490003 Apr 11 '16 at 01:52

score 1 · Answer 2 · answered Apr 11 '16 at 01:37

1

Just played around with your code, you need to add the following to your css:

Take a look at this https://jsfiddle.net/max234435/tjhb3md8/ - working version of what I think you are looking for

float: right; display: table-cell;

answered Apr 11 '16 at 01:37

max234435

587
5
18

score 1 · Accepted Answer · answered Apr 11 '16 at 01:45

Here's a working fiddle: https://jsfiddle.net/code4pi/yyrko1zw/

In newer browsers, you can use the display flex property.

Just add the following to your existing classes:

#flash {
    display: flex;
    justify-content: center;
}

.flash-close {
    align-self: center;
}

Vertically centering an inline-block element

HTML:

CSS:

3 Answers3