'Center a div of unknown width, while mantining left align inside

Here is my html/css code. Please, move border horizontally until you get last row containing less elements then rows above.

http://jsfiddle.net/wb5kT/

Problem starts here. I do want to center entire thing horizontally, so left and right distance from page borders to text would be the same. However, last visible row should be aligned to the left. I do not know beforehand what width of viewport will be, or total number of elements.

Adding "text-align: left" to .images aligns elements in last row to the left, but breaks entire "center align" thing. Example: http://jsfiddle.net/dgLQC/1/

Can it possibly be done without using tables?

IE 8 or lower and old versions of other browsers can be ignored.

htmlcsstext-alignmantine


Solution 1:[1]

I don't think you can do this even using tables; once you have content that's too wide for the container, the container will assume its parent's width, even though the content happens to be wrapped to fit in a smaller width.

By the way, to ensure that there is an incomplete last row (assuming more than one row) of elements, choose a prime number of elements.

Solution 2:[2]

put float:left in .thumb.

See this, http://jsfiddle.net/C5Pev/

Update:

My bad, above code is not working as wanted. A possible workaround would be,

http://jsfiddle.net/C5Pev/7/

Solution 3:[3]

Not sure if I understood your question correctly, but seems like you need to align the text inside the last row (two divs) to the left while keeping all others with the text centered:

You can apply a class for that:

.alignLeft {
    text-align: left;
}

And give that class to the last two divs.

Here is the Fiddle Example!

EDITED:

Your question should be rephrased, it is leading to wrong conclusions on what your goal is, but is this what you are looking for:

See this Fiddle Example!

Relevant CSS Update:

.thumb {
  float: left;              // align divs to the left of each other
  text-align: center;       // center text inside the div
  position: relative;
  border: 1px solid #D9D9D9; // view the blocks, not needed
  margin: 1px;               // get some distance between blocks, not needed
  font-size: 10px;           // small text to view that's centered, not needed
}

Tip: Shrink horizontally until you get 3 blocks by row, thus having the two divs with the text I am on the last row! alone on the last row.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Neil
Solution 2
Solution 3

Related Questions