html - 如何不垂直居中文本元素？

Question

您将如何将文本定位在<button>左上角或右下角（或其他）？我无法弄清楚是什么导致它垂直对齐它的方式，或者如何覆盖它。

<button>
    <time>Foo</time>
    <br />
    <span>Bar</span>
</button>

button {
    display: block;
    width: 124px;
    height: 200px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    background: #EEE;
}

示例 jsfiddle

Answer 1

将文本包围在一个 div 中，在 div 上设置一个类。在该 div 上使用自定义 css 将其移动到您想要的任何位置。

<button>
    <div class="move">
        <time>Foo</time>
    <br />
    <span>Bar</span>
     </div>
</button>

button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}

.move{
    padding-top:50px;   
}

见这里：http: //jsfiddle.net/gzTax/

Answer 2

将您的内部元素包装在一个 div 中，并将按钮上的位置设置为相对，并将 div 上的位置设置为绝对，就像这个jsFiddle 示例：

<button>
    <div>
        <time>Foo</time>
        <br /> <span>Bar</span>
    </div>
</button>
button {
    display: block;
    width: 124px;
    height: 200px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    background: #EEE;
    position:relative;
}
div {
    position:absolute;
    bottom:0;
    right:0;
}

Answer 3

如果您正在寻找一种无需任何额外标记即可更改对齐方式的解决方案，您可以尝试使用填充。例如，减少height和增加padding-top值。

例如：http: //jsfiddle.net/hNs7q/14/