How can I center left floated items in CSS?

Question

I have the below code in my style.css file which results in my grid/box items displaying to the left of the webpage, as per these examples:

As you can see, these float to the left but I really want them to be centered. I've tried removing the float: left and putting display: inline-block and text-align: center and other variations which didn't work.

What do I need to change to make it work?

.GRID
width:170px;
height:235px;
background:#f4f4f4;
border:1px solid #dedede;
padding:4px;
border-radius:4px;
text-align: center;
float:left;
margin:9px;
margin-bottom:20px;
position:relative

.XOX
display: block;
margin-bottom: 3px;
margin-top: 0px; 
overflow:hidden

.widget-container
{
text-align:left
}

.widget-container ul { padding:0; margin:0; list-style-type:none }
.widget-container ul li { margin-bottom:6px; }

Answer 1

If the grids are what you want to center, try using margin: auto; if you haven't already in the .GRID selector. I'd remove your other margins before trying the first time to get a rough idea.

Answer 2

I don't know what your HTML looks like

but here is a simple way of centering content inside a div Heres a fiddle https://jsfiddle.net/78fmrtz4/

---

EDIT

After looking through your site you can simply fix this, by changing styles to:

.widget-container { text-align: center; }
.widget-container .widget-title { text-align:left; }

that is causing you issues, you should rather add that just to the title element that you want left, also on a side not you could achieve this without using floats and just having set widths, note you will have to cater for the margins you have set,

<style type="text/css">
.widget-container {
    width:100%;
    text-align: center;
    background-color:red;
}
.widget-container > ul {
    margin:0;
    padding:0;
    list-style:none outside none;
    width:100%;
}
.widget-container > ul > li {
    display:inline-block;
    margin:5px 0 0 0;
    width:30%;
    height:100px;
    background-color:magenta;
}
</style>

<div class="widget-container">
    <ul>
        <li>
            <a href="#foo" title="Link to foo">&nbsp;
            <img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
            </a>
        </li>
        <li>
            <a href="#foo" title="Link to foo">&nbsp;
            <img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
            </a>
        </li>
        <li>
            <a href="#foo" title="Link to foo">&nbsp;
            <img="http://yourdomain.co/assets/img.png" alt="ALT TEXT">
            </a>
        </li>
    </ul>
</div>

Answer 3

Currently you set your col

<div class="col-xs-12 col-sm-6 col-lg-6">

meaning that you can't achieve the centering positioning. There's a way to make your col in center without edit your css.

I using offset to make you col in center.

To know more about offset click the link that i provide http://getbootstrap.com/css/#grid-options

Before

<div class="col-xs-12 col-sm-6 col-lg-6">

Replace the before with

<div class="col-md-offset-3 col-lg-6">

Result

Comment if got any question. Thanks.

Answer 4

if you want your output to look like the screen below

Then simply try adding the following css

.grid_task{
left: 15%;
position: relative;
}