How to center multiple divs with float left?

Question

I need a gallery of images. Thereby it should be responsive. When there are too many images for one line, they should be displayed in the next. That's what I have already implemented. My problem now is that the last line (when it has just one image for example) is centered, too. But It should be floated left.

I tried float:left, but this just makes everything float left and not center anymore.

Here is an JSFiddle-Example.

How can I have the last image float left?

HTML:

<div class="psAppWrapper">
    <div ng-repeat="app in applications track by $index" class="psAppTile">
        <img src="{{app.icon}}" class="psAppIcon"/>
        <p class="psAppTitle">{{app.title}}</p>  
    </div>
</div>

CSS:

.psAppIcon {
  width: 80px;
  height: 80px;
}

.psAppTitle {
  text-align: center;
}

.psAppTile {
  width: 80px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.psAppWrapper {
    width: 100%;
    text-align:center;
}

EDIT

When I add float left it looks like this:

The red one is psAppWrapper. Here you can see that the images are not centered. The left ones have much less space to the left than the right ones to the right. The spaces should be the same.

Your question is a bit confuse. Also where you say they should be shown like this there is no example. Please fix and will try to help. — yomisimie, Dec 12 '16 at 12:46
use media queries and do what @anurag said for width's < 768px or whatever you need — sTx, Dec 12 '16 at 12:53
Do they *have* to be centered using `float left`, or are other techniques allowed as well? — GolezTrol, Dec 12 '16 at 13:00
Essentially, there is NO **native** layout method that can do this...that's not the way the line box model works. Related - http://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items — Paulie_D, Dec 12 '16 at 15:16

score 2 · Answer 1 · answered Dec 12 '16 at 12:48

2

This

.psAppWrapper {
    width: 100%;
    text-align:left; /* Changed this from text-align:center */
}

should align the last element to the left.

answered Dec 12 '16 at 12:48

anurag

2,176
2
22
41

This aligns everything to left. The "complete" lines should stay like they are. – chocolate cake Dec 12 '16 at 12:53
Use a parent around e.g.
...
, use text-align: center to align the children of .psAppWrapperParent, and then use text-align: left as shown above for the .psAppWrapper – anurag Dec 12 '16 at 13:00
Also, width: 100% for the . psAppWrapper will make it take the whole width of the parent. As I understand, you need to keep .psAppWrapper in the center of the parent, and children of .psAppWrapper left-aligned, you need to use display:inline-block for .psAppWrapper, and reduce the width of .psAppWrapper according to your requirement. – anurag Dec 12 '16 at 13:05
I'm not sure if I understood it correctly. I added the div `psAppWrapperParent` around the `psAppWrapper` and gave it the style `text-align: center`. When I try it like this (and the code in you answer), everything is still floating left. – chocolate cake Dec 12 '16 at 13:07
1

Have updated your fiddle, let me know if this helps https://jsfiddle.net/uLo6r47g/5/ – anurag Dec 12 '16 at 13:11
Adding `width: 100%` and so on did not work either. Maybe I can not express what I mean. I will edit my question. – chocolate cake Dec 12 '16 at 13:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130408/discussion-between-anurag-and-chocolate-cake). – anurag Dec 12 '16 at 13:12

actc · Answer 2 · 2016-12-12T13:30:36.330

2

Nowadays, positioning block items via float: left; is considered bad practise. You should use display: flex; to align block items in the way you like. For the last row, use flex-wrap: wrap;. So you should end up with this CSS:

.psAppTile {
    display: flex;
    flex-wrap: wrap;
}

You can find explanations and more information on display:flex; here.

But I think that you'll need another technique, display: grid; might do the trick. I must admit that I've not yet used this for layout. [You can find a complete guide here.][3]

edited Dec 12 '16 at 13:30

answered Dec 12 '16 at 12:51

actc

672
1
9
23

Everything is left when I add this. I can't just add it to the last row. – chocolate cake Dec 12 '16 at 12:58
http://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place – actc Dec 12 '16 at 13:11
The article you provided is more than 12 years old... "That is precisely the case. float was never meant as a layout tool. I summarized the history of floats in the article “Containing Floats“, but the short version is that floats are not supposed to be a design tool. They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all." – actc Dec 12 '16 at 13:13

How to center multiple divs with float left?

2 Answers2