Как увеличить поле div в CSS, так что текст центрирован независимо от длины

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

использование этого Demo1Demo2

это будет делать трюк

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

Предложил sfjedi

, если у вас есть вопросы w/ margins и/или padding дает вам нежелательную horizontal scrollbar, использование css box-sizing: border-box, так что 100% width не выбрасывает вас