Question

我的CSS文件中有以下代码，导致我的网格/框项目显示在网页的左侧。但是，我希望他们能够集中精力。我尝试删除浮动;左边和许多替代品但没有任何作用。我可以从下面添加/删除哪些内容以使它们居中？

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

和XX＆gt; LI：

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

Answer 1

除非你想使用弹性盒子（这使得这很容易），我通常会尝试以下几行。 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放在容器上

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

Answer 3

如果您只能访问html

<center>text</center>

或

如果您仍想使用CSS删除

float: left;

并添加

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

如何将CSS中的左浮动项居中？

3 个答案: