将某些li的内部水平居中ul

我在集中位于ul元素内的li的某个问题。下面是相关代码：将某些li的内部水平居中ul

ul.nav { 
    width: 1000px; 
    margin: 0 auto; 
    list-style-type: none; 
} 

.nav li { 
    float: left; 
    width: 300px; 
} 

#government { 
    clear: left; 
}

我一直在尝试不同的东西，使它象使得li的工作有text-align: center;或给他们margin: 0 auto;，但似乎没有奏效。我花了数小时试图找出问题，所以任何帮助将非常感激。以下是对我的情况看起来像一个截图：

我试图让li的到UL内水平居中。我不能只是做数学和设定保证金，因为宽度将是十进制的，并且可能对于每一个李不会相同。

来源

2015-08-26 saadq

所以你想让他们看起来就像在你的屏幕截图（即两排，每排两个项目），但不能贴在左边？ – user907860

是user907860，没错。 – saadq

你应该做一个小提琴。只是CSS是没有用的。 – jmargolisvt

这应该给你一个良好的开端：

ul.nav { 
    width: 1000px; 
    margin: 0 auto; 
    list-style-type: none; 
    text-align: center; /* to center horizontally child inline elements */ 
} 

.nav li { 
    display: inline-block; /* Set to inline-block instead of float: left */ 
    width: 300px; 
}

更新

要进入到行，请你ul元素具有较小的宽度。

例如

ul.nav { 
    width: 800px; /* Smaller width */ 
    margin: 0 auto; 
    list-style-type: none; 
    text-align: center; /* to center horizontally child inline elements */ 
    padding-left: 0; 
}

Fiddle

来源

2015-08-26 04:24:26

这帮助我更接近我期望的结果，谢谢。我只需要弄清楚如何将它分成两行。 – saadq

@meh_programmer我已经在评论中回答了你的问题。 –

将某些li的内部水平居中ul

回答

相关问题