[英]let 3 images stick to the center of the bottom of the parent div, next to each other
[英]Center two divs next to each other at the bottom of a parent div
我試圖達到這樣的效果,在我的藍屏上,兩個控件居中於底部,彼此相鄰...我嘗試使用以下方法將它們居中:
.volumeControl{
float: right;
background: red;
}
.muteButton{
background: green;
float: right;
}
它幾乎可以正常工作,但首先-元素不在屏幕中央,其次-靜音按鈕位於左側(我想將其放在音量的右側)酒吧)..這是我的小提琴: http : //jsfiddle.net/en0r1Lgu/
謝謝!
居中時,建議不要使用浮點數。 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>
使用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>
您可以使用dispplay:inline-block
insteed of 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;
}
您不需要使用太多的代碼。 這可以通過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; }
請注意, 除了IE 8和9之外 ,所有主要瀏覽器都支持flexbox。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.