垂直对齐固定定位div内的跨度

Question

I know, there are posts on this before, but I have looked over all of them and still can't seem to get this to work. Most of the related answers I've seen require you to specify the height of the containing div, which in my case is dynamic.

I have an fixed positioned div at the bottom of the window. I want to have a dismiss button just off the right side and always vertically aligned in the center of the div, no matter the height.

JSfiddle: https://jsfiddle.net/w2zd3q0b/1/

 .bottombar { width: 100%; position: fixed; left: 0; bottom: 0; z-index: 9990; border: 1px solid #000; padding: 0.5em; } .bottombar p { /* Leave room for the dismiss button */ margin: 0 1.5em 0 0; padding: 0; } .dismiss { position: absolute; right: 1.5em; cursor: pointer; } 

 <div class="bottombar"> <p>This is some message inside of a div. I want to vertically center align the span. This is some message inside of a div. I want to vertically center align the span.<span class="dismiss">X</span></p> </div><!--/.bottombar --> 

In this case, it looks fine until the bottombar div takes up more than one line of text, then the span is no longer vertically centered.

Answer 1

You can use CSS3 transform that works well for unknown height container.

.dismiss {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  ...
}

 .bottombar { width: 100%; position: fixed; left: 0; bottom: 0; z-index: 9990; border: 1px solid #000; padding: 0.5em; box-sizing: border-box; } .bottombar p { margin: 0 1.5em 0 0; padding: 0; } .dismiss { position: absolute; top: 50%; transform: translateY(-50%); right: .5em; cursor: pointer; } 

 <div class="bottombar"> <p>This is some message inside of a div. I want to vertically center align the span. This is some message inside of a div. I want to vertically center align the span. <span class="dismiss">X</span></p> </div> 

I also added box-sizing to the div in the code snippet so that gives you true 100% width including the borders, you might need to adjust the relevant spacing slightly.

Answer 2

DEMO

So I cleaned up some things and arrived with simple styling using flexbox (more info here )

.bottombar {
    width:100%;
    position: fixed;
    left: 0;
  bottom: 0;
    z-index: 9990;
  border: 1px solid #000;
  /* padding: 0.5em; */
  display: flex;
  align-items: center;
}
.bottombar>span {
  padding: 0.5em;
}
.bottombar .message{
  flex-grow: 1;
}

.dismiss {
    cursor: pointer;
}

html

<div class="bottombar">
    <span class='message'>
         This is some message inside of a div. I want to vertically center align the span.
    </span>
    <span class="dismiss">X</span>
</div>