中心兩個div在父母div的底部彼此相鄰

Question

我試圖達到在我的藍色屏幕上兩個控件都集中在底部，彼此相鄰的效果......我嘗試使用以下方法居中：

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

，它幾乎工作，但首先的 - 元素不在屏幕中央，和所有的第二 - 莫名其妙的靜音按鈕位於左側（我希望把它在音量欄的右側）.. 這裏是我的小提琴：http://jsfiddle.net/en0r1Lgu/

謝謝！

Answer 1

當圍繞它adviseable不使用浮動。 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 2

使用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 3

你可以使用dispplay:inline-block insteed的float然後用小負利潤率刪除inline-block的元素之間的不良習慣和空間，不要忘記使用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。