0

This is what my page looks like:

enter image description here

Now when I add another post:

enter image description here

It is aligned to the left, but I want them to be centered.

How can I center them?

#demo {
    float: left;
    margin: 0 auto;
    width: 980px;
    list-style: none;
}
#demo li {
    background: #fec722;
    float: left;
    margin: 10px 0 10px 15px;
    width: 178px;
}
#demo img {
    height: 243px;
    margin: 3px;
    width: 172px;
}
<ul id="demo">
    <li><img src="http://goo.gl/0nSAIH"></li>
    <li><img src="http://goo.gl/0nSAIH"></li>
</ul>

(JSFiddle)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
SarpSTA
  • 279
  • 2
  • 15

4 Answers4

2

All you really need are two lines of code (and you can get rid of all the floats and clearfix divs):

#shelf {
    display: flex;
    justify-content: center;
}

Revised Fiddle

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer. More details in this answer.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

Look Here It is not identical, but it's a start.

A few things worth mentioning

ID's must be unique to one element, you had multiple list items with the same ID.

To align an element horizontally, it needs to have a display of block, a set width, and a margin on the left and right of auto. This will not work on floated elements. You can also control inline elements with text-align.

Avoid floating elements about the page. Floats are over used, there are much better options to aligning content.

mattdevio
  • 2,319
  • 1
  • 14
  • 28
1

You just can't float something to the left and align it to the center at the same time.

What I recommend you here, is to avoid the float, and instead set display: inline-block; to the li's. That, in addition to a text-align: center; to the ul makes the trick.

Here's the jsfiddle updated: https://jsfiddle.net/jormaechea/tm91znz2/5/

Joaquín O
  • 1,431
  • 1
  • 9
  • 16
1

First, about the floats

Stay as far away from floats as you can. They will cause problems with your layout unless you are experienced in their use. 90% of the time, if there is a problem on a page with floats, the floats are the problem. Instead, you should use display: inline-block, it's the best thing since sliced bread.

Floats can be useful for things like putting an image in a paragraph of text, then allowing the text to flow around the image naturally. Other than that, you can probably find a better way to achieve what you're after.

Next, the spacing

So you have some spacing problems. In general, stay away from margins as much as possible (kind of like floats, but not as bad). Margins add to the box sizing, instead of being included in it, as well as they can do other funky things in different situations. If you have to use a margin, use a margin, but try to avoid them. Instead, use padding where you can. You can utilize a container element, then apply padding to it in order to give the appearance of a margin.

When it comes to inline-block elements, space between the tags in the HTML itself will be rendered as a single space. To get around this, set the font-size of the parent to 0, then reset the font-size on the child elements (the default font-size on all modern browsers is 16 pixels).

Lastly, the alignment

Once you've taken all of the advice above into consideration and applied it to your code, just use text-align: center on the parent, reset it on the children, and you're good to go!

Here, have an example, free of charge

#demo {
    text-align: center;
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
#demo li {
    text-align: left;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
}
#demo img {
    height: 243px;
    width: 172px;
}
#demo .inner {
    background: #fec722;
    padding: 3px;
}
<ul id="demo">
    <li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
    <li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
</ul>

Related