javascript - 一种相对于内容将 div 内部的跨度居中的方法？

Question

我正在尝试制作一个精美的按钮。

JSfiddle

<div class="button" data-button='closed'>
    <div class="button-default">
        <span class="button-text">Click</span> 
    </div>
    <div class="button-overflow">
        <span class="button-overflow-text">Confirm!</span> 
    </div> 
</div>

这个想法是默认情况下它显示“点击”，当点击它时它切换到“确认”。

问题是我不知道如何进行“点击”和“确认!”始终居中。我想要它，所以无论我在那里放什么文字 - 它仍然会居中。

Answer 1

只需添加

text-align: center;

到 .button。

fork fiddle -> http://jsfiddle.net/Wd5vP/