CODEWITHSUNDEEP
htmlcss
Ing. Michal Hudak
Ing. Michal Hudak

Reputation: 5612

CSS center floating li

I have ul where li elements are floating left. I want to align those li elements to center of ul.

Goal:

before ======>>> after

My try:

My try always result this

my

Jsbin:

http://jsbin.com/EGoVAg/19/edit

EDIT:

width of #wrapper is not fixed ! I use 320px just to show you result pictures !

Upvotes: 2

Views: 78

Answers (3)

Adam Jenkins
Adam Jenkins

Reputation: 55732

Your only option is to set a fixed width and do:

#wrapper {
 display: block;
 margin: 0 auto; /* center it */
 width: XXX;
}

You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width

http://jsbin.com/EGoVAg/23/edit

You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.

Upvotes: 0

matewka
matewka

Reputation: 10158

You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:

width: 244px;

Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent

.widgetPhotoGallery .widgetContent {
    background-color: lime;
}

Here's the update JSbin.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128801

Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:

.widgetPhotoGallery li.photo{
    background-color: blue;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
}

Then all you need to do is simply give your ul some padding (36px evens out both sides):

.widgetPhotoGallery .photogallery{
    background-color: lime;
    list-style: none;
    padding:0 36px;
    margin: 0 auto;
    text-align: left;
}

Working JSBin demo.

On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.

Upvotes: 2

Related Questions