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.

分叉的小提琴-> http://jsfiddle.net/Wd5vP/

Answer 2

添加text-align: center;到您的 CSS 类.button

现在看起来像这样：

.button {
  border: 1px solid black;
  background: #EEE;
  width: 100px;
  height: 28px;
  overflow:hidden;
  cursor: pointer;
  text-align: center;
  line-height: 28px;

}

您还需要将您的 css 类更新.button-overflow-text为display: inline并删除text-align: leftand vertical-align:middle：

.button-overflow-text{
  display: inline;   

}

Answer 3

只需将 text-align:center 添加到 .button-overflow

.button-overflow {
    width:100%;
    position:relative;
    display:table-cell; 
    background:green;
    width: 100px;
    height: 28px;
    right: -100px;
    text-align:center;
}

Answer 4

您可以稍微简化 CSS，如下所示：

.button {
    border: 1px solid black;
    background: #EEE;
    width: 100px;
    height: 28px;
    overflow:hidden;
    cursor: pointer;
}
body {

    font-family:Arial;
}


.button-text {
    position:absolute;
    left:40px;
}
.button-overflow {
    width:100%;
    position:relative;
    background:green;
    width: 100px;
    height: 28px;
    right: -100px;
}

.button-default, .button-overflow {
    text-align: center;
}

Answer 5

这个修改后的 CSS 对我有用：

.button {
    border: 1px solid black;
    background: #EEE;
    width: 100px;
    height: 28px;
    overflow:hidden;
    cursor: pointer;
    text-align:center;

}

.button-default{text-align:Center;}
body {

    font-family:Arial;
}


.button-text {
    position:absolute;
    left:40px;
}
.button-overflow {
    width:100%;
    position:relative;
    display:table-cell; 
    background:green;
    width: 100px;
    text-align:center;
    height: 28px;
    right: -100px;
}
.button-overflow-text{
    text-align:Center;

}