html - 如何在 CSS 中将左侧 float 元素居中？

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>李:

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

Answer 1

除非您希望使用 flex-boxes(这使得这很容易)，否则我通常会尝试以下几行。 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;
}