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

Question

I am trying to make a fancy button.

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>

The idea is that by default it displays 'Click' and when clicked it switches to 'Confirm'.

The problem is that I don't know how to make 'Click' and 'Confirm!' be always centered. I want it so no matter what text I put there - it still will be centered.

Answer 1

Just add

text-align: center;

to .button .

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

Answer 2

You can simplify the CSS slightly, as such:

.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

Add text-align: center; to your css class .button

It would look like this now:

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

}

You also need to update your css class .button-overflow-text to display: inline and remove text-align: left and vertical-align:middle :

.button-overflow-text{
  display: inline;   

}

Answer 4

just add text-align:center to .button-overflow

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

Answer 5

This modified CSS worked for me:

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

}