将文本放置在div底部

Question

我有四个DIV挨着排列在一起，并且它们都居中显示在屏幕中央。每个div里有两个单词，但我不想它们出现在顶部，我希望它们显示在div的右下角。我应该怎么做？

- anon271334

Answer 1

将文本包装在 span 或类似元素中，并使用以下 CSS：

.your-div {
    position: relative;
}

.your-div span {
    position: absolute;
    bottom: 0;
    right: 0;
}

- alex

---

你也可以使用CSS属性，例如： vertical-align:bottom; 和 float:right;。不是吗？ - Harry Joy

只有当元素具有 display: table-cell 样式时，vertical-align 才会生效，而这在低于 IE8 的浏览器中并不支持。 - alex

如果你不太在意你的高度，这个方法效果很好。 - courtsimas

不支持JS库，包括ReactJS和Next JS。有什么解决方法吗？ - Trect

这就是我缺失的div位置！谢谢。 - MrrMan

Answer 2

<div id="container">
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
</div>

#container{
    width:450px;
    height:200px;
    margin:0px auto;
    border:1px solid red;
}

#container div{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    float:left;
    margin-right:5px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}

请查看示例http://jsfiddle.net/7YTYu/2/以了解更多关于it技术的相关知识。

- Hussein

Answer 3

感谢@Harry，以下代码适用于我：

.your-div{
   vertical-align: bottom;
   display: table-cell;
}

- meck373

---

这个能用，但是文本对齐不起作用了，文本只是靠左对齐，我无法更改它。 - Aditya

Answer 4

如果您只有一行文本并且您的div具有固定的高度，您可以这样做：

div {
    line-height: (2*height - font-size);
    text-align: right;
}

请查看示例。

- melhosseiny

Answer 5

我认为使用flex box（兼容性）比绝对定位更好。以下是我在纯CSS中的示例。

.container{
  background-color:green;
  height:500px;
  
  /*FLEX BOX */
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.elem1{
  background-color:red;
  padding:20px;
  
   /*FLEX BOX CHILD */
 -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
 
}

<div class="container">
 TOP OF CONTAINER 
<div class="elem1">
  Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.

Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>

</div>

- Skylin R

---

当底部位置成问题时，我认为flex-direction: column通常可以更好地帮助解决。 - Fanky

这是由于供应商前缀属性。没有它就没那么多了 :) - Skylin R

难道你不认为当你只是为了把一些东西放到 div 的底部而不得不添加这样的代码时，我们已经输掉了这场战斗吗？ - Yaza

Answer 6

你可以通过将父元素设置为display: table，并将子元素设置为display: table-cell来实现此目的。例如：

.parent {
  position: relative;
  display: table;
  height: 150px;
  width: 115px;
  background-color: #000;
  padding: 15px;
  color: #fff;
  cursor: pointer;
 }
 
 .child {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  text-align: right;
 }

<div class="parent">
  <div class="child">
    <div class="content">Content goes in here</div>
  </div>
</div>
    

- Nicholas Smith