HTML & CSS：将文本行与 div 的底部中心对齐

Question

我想为我的 div 设置一个特定的布局。 这些 div 包含摘要（大约 500 个字符长的文本），我希望在文本之后，在我的框的底部边缘有一行包含类似Link to additional information : *link* 。

这是一个ascii布局艺术，供你们理解我的意思：

---

Here is some text blablablablablablablab lablablablablablablablablablablabla gfff ff f blablablablablablablablablablablablabla blablablablablablablablablablablablabla ff f ffff blablablablablablablablablablab lablablablablablablablablablablablablablablablablab ff lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla

               Link to additional information here : *link*.

---

我希望最后一行居中。 我的布局使用百分比，因此我不能使用绝对定位。 如果调整窗口大小，它应该能够移动。

这是div的CSS：

float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;

---

编辑：如果忘了告诉，这些 Div 是 DOM 元素（也就是每次加载页面时都会生成它们），并且链接位于 XML 文件中的单独标记中。 因此，如果有什么我可以做的：

 <div class="summarydiv"> summary from xml</div><br> <div class="centerlink">link line and link from xml</div>

Answer 1

我真的很喜欢 div，因为你永远不知道什么时候你可能想要对块进行不同的样式设置，所以我会这样做：

<div class="parent">
   <div>Here is some text........</div>
   <div class="link"><a href="#">Link to additional information</a></div>
</div>

和CSS：

.parent {
    position:relative;
    float: left;
    width: 91.5%;
    min-width: 825px;
    height: 120px;
    text-align: left;
    z-index: 1;
    border:solid 1px #19365D;
    background-image:url('images/NiceBackgroundDude.png');
    background-repeat:repeat-x;
    margin-left:3.7%;
    margin-right:3.7%;
    padding-left:0.5%;
    padding-right:0.5%;
}

.link {
    position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
}

最后是一个jsfiddle展示它的实际效果！

Answer 2

你可以玩一点位置和边距

position:absolute;
bottom:0;
left:50%;
margin-left: -50%;

左侧 50% 的定位将从容器的垂直轴开始。 左侧的负边距将使内部 div 居中。

Answer 3

将最后一行插入到<span>元素中，将元素样式设置为

width: auto;
text-align: center;

那应该做的工作

Answer 4

您还可以将 htat 最后一行放在它自己的 div 中，并使用 !important 将下边距设置为零。

Answer 5

如果有人再遇到这个帖子，我经常会遇到这个概念，并找到了一个非常动态的代码片段，一直在为我工作。 这样您就可以始终位于动态变化容器的底部和中心！ （大容器）

 .bigContainer{ width: 450px; height:450px; background: blue; } .container{ height: 100%; display: flex; } .container > h3{ margin: auto auto 0 auto; } 

 <div class="bigContainer"> <div class="container"> <h3>Super McAwesomePants</h3> </div> </div> 

Answer 6

flex-grow为我工作。 这是我的做法：

 .container { display: flex; flex-direction: column; width: 91.5%; min-width: 825px; height: 120px; border: solid 1px #19365D; } .item { width: auto; /* Grow to fill available space */ flex-grow: 1; } .summary { flex-grow: 2; } .link { display: flex; align-self: center; /* Make the flexbox items aligned vertically at the bottom */ align-items: flex-end; }

 <div class="container"> <div class="item summary"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibu </div> <div class="item link"> <a href="#">Link to additional information</a> </div> </div>

Answer 7

这个 CSS 对我有用：

.align-bottom-center {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Answer 8

要将 div 对齐到中心，只需使用下面的 css：

.alignCenter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="alignCenter"></div>

Answer 9

要对齐底部中心，您可以使用以下代码：

  width: auto;
  text-align: center;
  padding: 60% 20% 0% 20%;