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，因为separate your CSS from your HTML是一种很好的做法。

Answer 2

请删除浮动并显示博客并尝试。

<强> Love Demo

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 style。

Answer 4

span是一个内联元素。首先将其设为block或inline-block，然后添加margin。

如何在css中将文本对齐到顶部或底部

4 个答案: