CSS에서 div 상자의 크기를 조정하여 텍스트가 길이에 관계없이 가운데에 배치되도록하는 방법

Question

CSS에 대해 충분히 지식이 없기 때문에 질문을 단어로 표현하기가 어렵습니다. 그래서 저는 두 개의 예제 jsfiddles를 만들었습니다.

이 첫 번째 예에서는 출력에서 ​​왼쪽 맞춤 텍스트를 보여줍니다. http://jsfiddle.net/Aro2220/yw38p/

그러나이 두 번째 예에서는 텍스트가 충분히 길면 프레임의 전체 너비를 채 웁니다 (정확한 용어인지는 확실하지 않음). 그리고 센터를 멋지게 내려 봅니다. http://jsfiddle.net/Aro2220/DUcP6/

텍스트를 길이에 관계없이 프레임의 중심에 완벽하게 배치하려고합니다. 어떻게해야합니까? 내 CSS는 꽤 드문 드문 드문 CSS 명령이 있는지 쉽게 알지 못하거나 복잡한 작업 인 경우 잘 모르겠습니다.

#outer { 
    position: absolute; 
    overflow: hidden; 
    height: 200px;  
} 

#inner { 
    position: relative; 
    top: 0px;  
    text-align: center; 
} 

Answer 1

사용이 당신에게 원치 않는 horizontal scrollbar 사용을 제공 sfjedi

당신이/문제가 w/ margins하고있는 경우

또는 padding에 의해 제안 트릭을

#outer { 
    position: absolute; 
    overflow: hidden; 
    height: 200px; 
    width:100%; // added this to make the outer div width 100% 
} 

할 것 Demo1Demo2

이 CSS box-sizing: border-box이므로 100% width은 당신을 버리지 않습니다