簡體   English   中英

將 DIV 保持在其父 DIV 的底部中心

[英]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%; #headerheight: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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM