[英]Keeping a DIV at bottom-center of its parent DIV
我的 HTML 結構基本上是這樣的 -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
忽略除<div id="header">
之外的任何元素我想將<div class="container">
內的<div id="header">
完全對齊在底部中心。 我正在使用以下 CSS 代碼-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
父 (#header) 和子 (#header .container) DIV 之間存在高度差異。 拆卸position:absolute;
從孩子居中,但它堅持父母的頂部而不是底部。 保持position:absolute;
將其粘貼在底部,但將其與左側對齊。
如何同時對齊中心和底部?
我嘗試了上面的所有解決方案,但是當您調整瀏覽器窗口大小時它不起作用。 當您不知道元素的寬度時,主要應用此解決方案。 或者如果在調整大小時更改了寬度。
在做了一些研究之后,我嘗試了以下方法,它在所有屏幕尺寸上都能完美運行。
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
我為仍然面臨這個問題的任何人分享了這個。
以這種方式嘗試:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
試試這個
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
用這個:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
這里的jsfiddle
更新:
正如 DenisVuyka 在評論中所說,我應該補充一點,上面的示例是對 DIV 固定高度的這個特定問題的回答。
如果您希望 DIV 的高度不破壞事物,那么例如您應該使用padding-top:10%;
在#header
和height:100%
中#header .container
CSS。
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
這是一個演示: http : //jsfiddle.net/d6ct6/ 。
我也試圖讓它在我的項目中工作。 我已經編輯了這個 jsfiddle: http : //jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
但我發現這僅在 .container 的寬度固定時才有效。
如果 .container 的寬度不固定,您將需要 javascript 來查找它的寬度,然后在計算中更改該寬度。
當寬度響應時,使用這個:HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
如果您更關心讓內部 div 在中心對齊並且可以手動設置垂直對齊。
我使用的演示高度是第一個 div 高度 - 第二個 div 高度。
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
我將利用 CSS 表格顯示屬性並執行以下操作:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
將#header
塊設置為display: table-cell
並設置vertical-align: bottom
以將子項的底部邊緣與父項的底部邊緣對齊。
子.container
元素具有display: inline-block
,這將允許它響應.container
元素的text-align: center
屬性。
無論子.container
的寬度如何,這都將起作用。
演示小提琴: http : //jsfiddle.net/audetwebdesign/p9CxE/
同樣的問題困擾了我一個小時左右,直到我意識到我可以添加一個中間 div; 這將垂直對齊問題與居中問題分開。
.dparent { border: 1px solid red; width: 300px; height: 300px; position: absolute; } .dchild { border: 1px solid blue; margin-left: auto; margin-right: auto; width: 200px; height: 100px; bottom: 0px; position: relative; } .dmid { border: 1px solid green; width: 100%; position: absolute; bottom: 0;
<div class="dparent"> <div class="dmid"> <div class="dchild"></div> </div> </div>
先做垂直對齊,絕對位置和0底部。 然后將 margin-left 和 margin-right 設置為 auto 進行居中。
您可以針對任何相關寬度嘗試此解決方案:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
祝你好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.