不是那么简单的DIV横向中心

时间:2015-09-08 18:22:31

标签: html css html5 css3 center

所以我完成了研究,并且我理解了保证金:0自动技巧,但我没有成功实施。

如果您导航到http://CIRRUSFitness.com并在主页上找到第二个滑块,您将看到我的意思。如果产品少于4件,则产品偏离侧面。

我相信我想要使用的代码是

.catalog .items { width: 1004px; margin: 0 auto; }
.catalog .item-block-1 { width: 210px; margin: 0 25px -25px 0; }

我试过以下

.catalog .items { width: 100%; margin: 0 auto; }
.catalog .item-block-1 { width: 210px; margin: 0 auto; }

我可能需要将.items集中在.catalog中?唯一的目录代码是

.catalog { padding: 0 0 52px 0; }

有人可能更容易使用他们的开发者工具检查网站并查看我做错了什么,但我非常愿意提供任何缺失的信息。

感谢帮助人员..我知道这是一个简单的解决办法,但我做了一些根本性的错误,希望有人可以向我指出。

2 个答案:

答案 0 :(得分:0)

您是否只想将文本置于元素中心?如果只是添加

.catalog .items { width: 100%; margin: 0 auto; text-align:center; }

如果您希望元素本身居中,宽度应小于100%,请尝试

.catalog .items { width: 50%; margin: 0 auto; }

答案 1 :(得分:0)

我为你准备了这个

花了我一会儿

只需粘贴此代码

即可
    .main-menu{float:left;
   width:100%;
   background:#fff;
   overflow:hidden;
   position:relative;}

.main-menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.main-menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}

.main-menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   text-decoration:none;
   line-height:1.3em;
}