如何在css中將文本對齊到頂部或底部

Question

這是我的代碼，我嘗試將文本name和age對齊到底部，但它不起作用

<div class="tiles">
    <div id="metro-array">
        <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px;  display: block; background-color: deepSkyBlue;  color: #fff;">
            <span style="margin-top:100px"> 
                Name 
            <span>
            Age
         </a>
         <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue;  color: #fff;">
             name2
             Age 2
         </a>         
    </div>
  </div>

我的CSS

.tiles {
    font-family:'Lato', Helvetica, sans-serif;
    line-height: 28px;
    font-size: 16px;
    color: #333;
    font-weight: lighter;
 }   
 #metro-array a,  #downloads a {
    font-weight: normal;
    text-transform: uppercase;
    float:left;
 }

}

我嘗試了這些跨度

margin-top:100px and `margin-top:-100px`

但它不起作用

Answer 1

我已經編輯了您的代碼以實現您想要的利潤。

http://plnkr.co/edit/VJYpZa76UL06FLlRpRJr?p=preview

我將所有樣式都移至style.css因為將CSS與HTML分開是一種好習慣。

Answer 2

請刪除浮動廣告並顯示博客，然后嘗試。

愛情示范

HTML

<div class="tiles">
<div id="metro-array">
    <a class="metro-tile align-top">
        <span> 
            Name 
        <span>
        Age
     </a>
     <a class="metro-tile align-middle">
         name2
         Age 2
     </a>  
            <a class="metro-tile align-bottom">
         name3
         Age 3
     </a>  
</div>

CSS

    .tiles {
    font-family:'Lato', Helvetica, sans-serif;
    line-height: 28px;
    font-size: 16px;
    color: #333;
    font-weight: lighter;
 }   
 #metro-array a,  #downloads a {
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
    width: 110px;
    height: 130px;
    display: table-cell;
    background-color: deepSkyBlue;
    color: #fff;

 }
a.align-bottom{
    vertical-align:bottom;
}
a.align-top{
    vertical-align:top;
}
a.align-middle{
    vertical-align:middle;
}

Answer 3

您可以將顯示塊樣式應用於該元素，並且該樣式應該可以解決上下邊距問題。 在此之前，請對您的代碼進行更正。 關閉span標簽。

<span style="display:block;margin-top:100px;">Name</span>

如果需要將其粘貼到任何其他內聯元素的左側或右側，請使用float：left或float：right樣式。

Answer 4

span是一個內聯元素。 首先將其設置為block或inline-block ，然后添加margin 。