I am in search of a solution to horizontally center content on a webpage, regardless of whether or not it has a defined width.
After referencing a Stack Overflow question on centering a div block without the width, I found a great method that works well when the content has no specified width or if it's smaller than the containing area.
However, when the content's width exceeds that of the containing area, the content gets centered but becomes inaccessible for scrolling.
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>
My question is, how can I center a div horizontally when its width is uncertain? And if the width surpasses the container size, I'd prefer the content to be left-aligned with a scrollbar at the bottom of the page, to function like a standard webpage.
Check out the jsfiddle for an example.
If necessary, I am open to incorporating JavaScript or jQuery for a solution.