Центрирование div по горизонтали с большой шириной содержимого ограничено

Question

Мне нужно центрировать некоторый контент на веб-странице по горизонтали. Содержимое может иметь или не иметь явной ширины.

Я использую переполнение стека вопрос centering a div block without the width в качестве модели, и он прекрасно работает, когда содержание не имеет явную ширину, или если явная ширина меньше, чем содержащую область.

Однако, если ширина содержимого больше, чем содержащая область, контент по-прежнему центрирован, но нет способа прокрутки к скрытому контенту.

CSS:

.letterbox-outer-wrap { 
    padding-top: 20px; 
    position:relative; 
    background: aqua; 
    overflow:hidden; 
} 

.letterbox-outer-center { 
    float:left; 
    position:relative; 
    left: 50%; 
    background: yellow; 
} 

.letterbox-inner-center { 
    float: left; 
    position:relative; 
    left:-50%; 
    background: red; 
} 

.letterbox-clear { 
    clear: both; 
} 

.large-explicit-width { 
    width: 3000px; 
    background:purple; 
} 

HTML:

<div class="letterbox-outer-wrap"> 
    <div class="letterbox-outer-center"> 
     <div class="letterbox-inner-center"> 
      <p class="large-explicit-width"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </div> 
    </div> 
</div> 

Как отцентрировать DIV по горизонтали, что может или не может иметь явную ширину? Если ширина больше, чем видимый контейнер, я хочу, чтобы выровнять содержимое и оставлять браузер в полосе прокрутки в нижней части экрана (как обычная веб-страница).

Пример: jsfiddle.

Я могу определенно использовать javascript и jQuery, если необходимо.

Answer 1

Если вы используете свойство left для центровки контента, то вы не можете получить доступ к этому при переполнении, поскольку вы хотите центрировать, когда width меньше размера браузера и с вашей фактической разметкой вы можете сделать следующее:

.letterbox-outer-wrap { 
    text-align:center; 
} 
.letterbox-outer-center { 
    display:inline-block; 
} 

Удаление float и left свойства, которые вы получили это http://jsfiddle.net/s5TLz/1/