콘텐츠의 상대적으로 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> 

아이디어는 기본적으로는 '클릭'이 표시되고 클릭 할 때 '확인'로 전환한다는 것입니다.

문제는 '클릭'및 '확인'하는 방법을 모르겠다는 것입니다. 항상 중심에 두십시오. 나는 거기에 어떤 텍스트를 붙여 놓고 상관없이 그것을 원한다. 여전히 중심에있게 될 것이다.

당신은 같은 약간 CSS를 단순화 할 수

Answer 1

:

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

당신의 CSS 클래스에 text-align: center;를 추가 .button

지금과 같을 것이다 :

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

}

또한 CSS 클래스를 업데이트해야합니다. display: inline-제거 text-align: left 및 vertical-align:middle :

Answer 3

단지 텍스트 정렬을 추가

.button-overflow-text{ 
    display: inline; 

} : 센터는 .button 오버플로하는

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

Answer 4

을 단지에

text-align: center; 

를 추가 .button.

갈래 바이올린 ->http://jsfiddle.net/Wd5vP/

Answer 5

이 수정 CSS는 나를 위해 일한 다음 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; 

}