11

我的 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;其粘贴在底部，但将其与左侧对齐。

如何同时对齐中心和底部？

4

9 回答 9

22

我尝试了上面的所有解决方案，但是当您调整浏览器窗口大小时它不起作用。当您不知道元素的宽度时，主要应用此解决方案。或者，如果在调整大小时更改了宽度。

在进行了一些研究后，我尝试了以下方法，它在所有屏幕尺寸上都能完美运行。

#somelement {
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

我为仍然面临这个问题的任何人分享了这个。

于 2017-08-30T20:07:39.150 回答
5

以这种方式尝试：

#header .container{ 
   width: 940px;  
   height: 262px; 
   background-color: #220000; 
   position: absolute;
   bottom: 0 ;
   left: 50%;
   margin-left: -470px; 
}
于 2013-07-01T13:22:25.703 回答
2

试试这个

#header .container {
    width: 940px;
    height: 262px;
    background-color: #220000;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
    left: 61px;
}
于 2013-07-01T13:28:03.587 回答
1

用这个：

#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 的高度不破坏事物，那么例如您应该在CSSpadding-top:10%;中使用#header和。height:100%#header .container

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

于 2013-07-01T14:17:46.603 回答
1

我也试图让它在我的项目中发挥作用。我编辑了这个 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);
});
于 2016-08-11T16:18:15.790 回答
0

如果您更关心内部 div 在中心对齐并且可以手动设置垂直对齐方式。

我使用的演示 高度是第一个 div 高度 - 第二个 div 高度。

#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
于 2013-07-01T13:37:02.153 回答
0

我会利用 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，这将允许它响应text-align: center父元素的属性。

无论孩子的宽度如何，这都会起作用.container。

演示小提琴：http: //jsfiddle.net/audetwebdesign/p9CxE/

于 2013-07-01T13:50:50.930 回答
0

同样的问题困扰了我一个小时左右，直到我意识到我可以添加一个中间 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 进行居中。

于 2014-12-30T17:48:33.367 回答
-2

您可以针对任何相关宽度尝试此解决方案：

width:100%;
position:absolute;
bottom: 5px; 
left:50%;
margin-left:-50%;

祝你好运！

于 2015-02-06T17:59:08.280 回答