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;
}

example 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 example ：

<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/

如何不在<button>元素中垂直居中文本？</button>

3 个答案: