保证金0汽车并不在我的情况下工作

我试图找到一个解决方案居中.team div中的.person div的。

我花了大约一个小时来弄清楚我做错了什么没有成功。

即使页面宽度发生变化，是否可以使.person div保持居中状态？在我的情况下，我有一个静态的width: 768px，但即使如此，我不能集中div的。

2013-02-19 WooCaSh

你只适用'保证金：0 auto'到'.team'所以只有该元素将在其父为中心。它的父元素的'width'是什么？如果您希望它以视口为中心，则父视图的“宽度”必须为视口的100％。 – Sparky 2013-02-19 02:52:45

@ .team'元素的Sparky父母是'.content'。 '.content'具有'width：744px;'。您可以在jsFiddle示例中为content class添加css。 – WooCaSh 2013-02-19 02:58:13

'.team'如何比父母更宽？你如何将一件东西放在一个没有空间的地方？如果您希望它在视口中居中，那么父视图必须与视口一样宽（100％），然后使用“margin：0 auto”。 – Sparky 2013-02-19 03:00:35

通过将人员类别设置为display:inline-block而不是float:left。
然后，您可以将text-align:center应用到团队课程。
这应该达到预期的效果。

.team { 
    text-align: center; 
    border: 1px solid green; 
    overflow: hidden; 
    width: 768px; 
    margin: 0 auto; 
    margin-top: 30px; 
} 

.person { 
    border:1px solid red; 
    text-align:left; 
    width: 200px; 
    display: inline-block; 

    &:nth-child(5n+1) { 
     margin-left: 0px; 
    }

我改变了边框颜色仅用于测试目的。这里

小提琴 - http://jsfiddle.net/sZNJG/7/

来源

2013-02-19 03:13:13 lukeocom

这就是我要找的。如果一切都会好的，我会接受你的回答。 – WooCaSh 2013-02-19 03:15:26

尝试添加text-align: center;team类。请参阅jsfiddle example here。

来源

2013-02-19 03:06:51 Muleskinner

它改变了什么？ – WooCaSh 2013-02-19 03:08:54

它将'.person' div放在'.team' div中。 – Muleskinner 2013-02-19 03:10:06

保证金0汽车并不在我的情况下工作

回答

相关问题