Question

我正在尝试制作一个花哨的按钮。

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

分叉小提琴 - ＆gt; http://jsfiddle.net/Wd5vP/

Answer 2

您可以稍微简化一下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 3

将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: left和vertical-align:middle：

.button-overflow-text{
  display: inline;

}

Answer 4

只需将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 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;

}

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

5 个答案: