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

Question

根据这些示例，我的style.css文件中包含以下代码，该结果导致我的网格/框项目显示在网页的左侧：

如您所见，这些控件向左浮动，但我真的希望它们居中。 我试着去掉float: left并放到display: inline-block和text-align: center和其他无效的版本。

我需要更改使其工作吗？

.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

如果网格是您要居中的位置，请尝试使用margin: auto; 如果尚未在.GRID选择器中。 在尝试第一次大致了解之前，我会删除您的其他利润。

Answer 2

我不知道您的HTML是什么样的

但这是将内容居中div的简单方法这里是一个小提琴https://jsfiddle.net/78fmrtz4/

---

编辑

浏览完您的网站后，您可以将样式更改为：

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

这会导致您遇到问题，您应该将其仅添加到要保留的title元素上，另一方面，如果不使用浮点数并且仅设置宽度，则无法实现此目的，请注意，您将不得不考虑拥有的边距组，

<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

当前您设置了上校

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

表示您无法实现居中定位。 有一种方法可以使您的col居中，而无需编辑CSS。

我使用偏移量使您居中。

要了解有关偏移的更多信息，请单击我提供的链接http://getbootstrap.com/css/#grid-options

之前

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

将之前的替换为

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

结果

如有任何问题，请发表评论。 谢谢。

Answer 4

如果您希望输出看起来像下面的屏幕

然后只需尝试添加以下CSS

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