Center two divs next to each other at the bottom of a parent div

Question

I try to achieve the effect that on my blue screen two controls are centered on the bottom, next to each other... I tried to center them using:

.volumeControl{
    float: right;
    background: red;
}
.muteButton{
    background: green;
    float: right;
}

and it almost worked, but first of all - the elements are not in the center of the screen, and second of all - somehow the mute button is on the left side (and I would like to put it on the right side of the volume bar).. Here is my fiddle: http://jsfiddle.net/en0r1Lgu/

Thanks!

Answer 1

When centering it's adviseable not to use floats. display:inline-block with text-align:center on the parent works much better.

#video-controls {
  position: absolute;
  bottom: 10px;
  left: 0px;
  width: 223px;
  overflow: hidden;
  text-align: center;
  float: none;
  display: inline-block;
  text-align: center;
}
.volumeControl {
  background: red;
  display: inline-block;
  vertical-align: middle;
}
.muteButton {
  background: green;
  display: inline-block;
  vertical-align: middle;
}
#volume-bar {
  width: 120px;
}
.player {
  position: absolute;
  width: 226px; /* sizes changed for demo reasons only */
  height: 126px;
  margin: 0 auto;
  overflow: hidden;
  background: blue;
  text-align: center;
}

<div class="player">
  <div id="video-controls">
    <div class="volumeControl">
      <input type="range" id="volume-bar" class="volumeRange" min="0" max="1" step="0.1" value="1" />
    </div>
    <div class="muteButton">
      <button type="button" id="mute">Mute</button>
    </div>
  </div>
</div>