如何在CSS中居左浮动项目？

Question

我的CSS文件中包含以下代码，这导致我的网格/框项目显示在网页的左侧。 但是我希望他们能居中。 我尝试删除float; left和许多替代方法，但没有任何效果。 我可以从下面添加/删除哪些内容来居中？

网格：

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

XX> LI：

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

Answer 1

除非您希望使用flex-boxes（这很容易做到），否则通常我会尝试以下方法。 可以margin:9px auto这一点的是margin:9px auto结合float:none作用：

.centred{
    display:block;
    float:none;
    /* a combination of float:none and left/right margin of auto */
    margin:9px auto;

    width:170px;
    height:235px;
    background:#f4f4f4;
    border:1px solid #dedede;
    padding:4px;
    border-radius:4px;
    text-align: center;


    margin-bottom:20px;
    position:relative;
    box-sizing:content-box;
}

Answer 2

如果我理解您的要求，则应删除元素上的float: left ，然后将display: inline-block放置，然后将text-align: center放在容器text-align: center

http://jsfiddle.net/2t523d92/1/

Answer 3

如果您可以简单地访问html

<center>text</center>

要么

如果您仍然想使用CSS删除

float: left;

并添加

display: inline-block; 
text-align: center;