如何将元素定位在其容器的底部？

Question

主要编辑，请re-open

正在使用 Bootstrap 2.3.2 创建一个页面，稍后将成为 Joomla 3.x 的模板。
在 header 中，我有 6 个元素。我能够如下所示定位它们。

问题

将 nav-pills 部分定位在 image 为 background-image 的容器底部。

在 nav-pills 的 .minimenu 容器上设置 margin-top 确实有效，但将其与顶部相关联。我想把它和底部联系起来。
vertical-align: bottom; 已尝试无解。

HTML代码：

<div class="container">
    <p class="headtitle">This is the Headline on Top!</p>
    <div class="header">
        <img src="http://www.chris-nlp-hall.com/tmp/logo1.png" class="pull-left logo1" />
        <img src="http://www.chris-nlp-hall.com/tmp/logo2.png" class="pull-right logo2" />
        <div class="mininav">
            <ul class="nav nav-pills">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Learn</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

p.headtitle {
  text-align: center;
  font-size: 1.4rem;
}
.header {
    background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
    background-position: center top;
    background-repeat: no-repeat;
    height: 160px;
}
.mininav {
    text-align: center;
    vertical-align: bottom; /* doesn't work */
}
.mininav .nav-pills {
    display: inline-block;
}
.header .logo1 {
    margin-left: 10px;
}
.header .logo2 {
    margin-right: 10px;
}

查看此更新 fiddle：https://jsfiddle.net/michi001/srzwz8o4/

Answer 1

在 bootstrap 中，您可以使用 pull-left 和 pull-right classes 作为徽标，导航栏可以使用 text-center class 居中在 parent div 中。背景的最佳选择似乎是使用 background-image.

通过 CSS 放置它

Answer 2

那你为什么不把 absolute 放在底部呢？

.mininav{
  position: absolute;
  bottom: 0px;
  width: 100%;
}

您还需要将 .header 设置为相对：

.header { position:relative; }

Answer 3

.mininav {
right: 0;
left: 0;
bottom: 0;
min-height: 30px; /*or other value*/
max-height: 30px; /*or other value*/ 
position: absolute;
}

.mininav p {
line-height: 30px;
}

Answer 4

.header {
  position: relative;
  background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 160px;
}

.mininav {
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

在.header中添加了相对位置并修改了.mininavclass

我已经解决了你的问题JS Fiddle

如何将元素定位在其容器的底部？

How to position element on the bottom of its container?

html

css

twitter-bootstrap

twitter-bootstrap-2

问题