Question

我想为我的div设置一个特定的布局。这些div包含摘要（大约500个字符的文本），我希望在文本之后，在我的框的底部边缘，有一行包含“链接到其他信息：链接”之类的内容

这是一个ascii布局艺术，让你们明白我的意思：

下面是一些文本blablablablablablablab lablablablablablablablablablablabla GFFF FF˚Fblablablablablablablablablablablablabla blablablablablablablablablablablablabla FF˚FFFFF blablablablablablablablablablab lablablablablablablablablablablablablablablablablab FF lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla

               Link to additional information here : *link*.

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

这是div的css

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

你也可以将最后一行放在自己的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

要将div对准中心，只需在css下方使用：

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

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

Answer 8

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

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

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

8 个答案: