在父 div 的底部将两个 div 彼此相邻居中

Question

我尝试实现在我的蓝屏上两个控件在底部居中，彼此相邻的效果...我尝试使用以下方法将它们居中：

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

它几乎成功了，但首先 - 元素不在屏幕中央，其次 - 静音按钮不知何故在左侧（我想把它放在音量条的右侧）.. 这是我的 fiddle：http://jsfiddle.net/en0r1Lgu/

谢谢！

Answer 1

使用margin:auto而不是浮动的东西

#video-controls{
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 223px;
    overflow:hidden;
    text-align: center;
    float: none;
    display: inline-block;
    text-align: center;
}
.volumeControl{
    margin: auto; /* added */
    background: red;
    display:inline-block;    
}
.muteButton{
    background: green;
    margin: auto; /* added */
    display:inline-block;
    margin-top: -5px;
}
#volume-bar {
    width: 120px;
}
.player{
    position: absolute;
    top: 43px;
    left: 29px;
    width: 226px;
    height: 426px;
    margin: 0 auto;
    overflow:hidden;
    background:blue;
}

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

Answer 2

居中时建议不要使用浮动。 display:inline-block 与 text-align:center 在父级上的效果更好。

#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>

Answer 3

你可以使用 dispplay:inline-block 代替 float 然后删除行内块元素之间习惯性的不良 space 和小的负边距，不要忘记使用 vertical-align属性以正确的方式设置元素：

.volumeControl{
display:inline-block;
background: red;
    vertical-align:middle;
}
.muteButton{
background: green;
display:inline-block;
    vertical-align:center;
    margin-left:-2px;
}

JSFIDDLE

Answer 4

你不需要用那么多代码。这可以通过 CSS Flexbox.

轻松完成

HTML

<div id="container">
    <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><!-- end #video-controls -->
    </div><!-- end .player -->
</div><!-- end #container -->

CSS

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

.player {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 226px;
    height: 426px;
    background-color: blue;
}

#video-controls {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.volumeControl { background: red; }
.muteButton { background: green; }
#volume-bar { width: 120px; }

UPDATED FIDDLE DEMO

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9。

在父 div 的底部将两个 div 彼此相邻居中

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

html

css

alignment