(Code: http://jsfiddle.net/T4hrK/)
I have been searching endlessly, but cannot seem to find a solution. I have an outer div, and within it, I wish to center an inner div. This inner div contains numerous inline elements (such as images in a gallery) that can be adjusted to inline-block or floating block elements.
The issue arises when the number of inline elements inside the inner div causes them to wrap onto a new line. However, the inner div does not resize itself to fit these elements exactly; instead, it sizes itself to match its parent's width. As a result, I am unable to center it within its parent due to this mismatch in widths.
My goal is to have the inner inline elements left-aligned within their container div, while ensuring that the div accurately encloses them for easy centering within its parent.
For example:
<div style="border:1px solid red; padding:2px;">
<div style="display:inline-block; border:1px solid green;">
<span>1234567</span>
<span>1234567</span>
<span>1234567</span>
<span>1234567</span>
</div>
</div>
In this scenario, the inner green div is too wide, preventing me from easily centering it within the red div.
In this example, each span represents an image, the green div should perfectly wrap around them, and the objective is to center the green div inside the red div.