Question

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

Mobile Phone View Laptop View

正如你所看到的，这些浮动到左边，但我真的希望它们居中。我已尝试删除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; }

这会导致你的问题，你应该把它添加到你想要的标题元素，也可以在不使用浮点数而只是设置宽度的情况下实现这一点，注意你必须满足您设置的保证金，

<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

目前您设置了col

<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;
}

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

4 个答案:

修改