如何将文本对齐到相同的div的顶部和底部？

Question

我试图将一行文字与图片的顶部对齐，同时也对齐图像的底部。

这是一个普鲁克尔

******  Name
******
******  More Info


<div class="row">
  <div class="col-md-4">
    <img src="https://graph.facebook.com/102031900129645/picture?type=square&redirect=true&width=100&height=100">
    <span>John Smith</span>
    <br>
    <span>10 friends</span>  
  </div>
</div>

Answer 1

你可以试试这个：

.col-md-4 {
    position: relative;
}

.col-md-4 span {
    position: absolute;
    top: 0;
}

.col-md-4 span:last-child {
    top: auto;
    bottom: 0;
}

工作演示

Answer 2

1. 只需把你的跨度写在图片上面。
2. 给出父的div位置:相对位置。
3. 给出跨度位置:绝对与顶部:0，底部:0(视需要而定)。

​

.col-md-4 {
    position: relative;
}

.col-md-4 .name {
    position: absolute;
    top: 0;
}

.col-md-4 .info {
    position: absolute;
    bottom: 0;
}

<div class="row">
  <div class="col-md-4">
      <span class="name">John Smith</span>
      <span class="info">10 friends</span>  
      <img src="https://graph.facebook.com/102031900129645/picture?type=square&redirect=true&width=100&height=100" />
  </div>
</div>

​