如何將文本對齊到同一div CSS的頂部和底部？

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. 指定范圍位置：絕對值，分別為top：0，bottom：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>