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

追加のマークアップなしで配置を変更できるソリューションを探している場合は、パディングを試してみることができます。たとえば、 を減らして値heightを増やしpadding-topます。

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

Answer 2

テキストを 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 3

内部要素を 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;
}