Question

我正试图将包含无序列表的部分（.provincia）居中。

我尝试了一个标准margin: 0 auto，但它没有达到预期效果。

我该如何解决这个问题？

CSS

.poblaciones-container {
    width: 1400px;
    border: 1px solid black;
}

.poblaciones {
    margin: 0 auto;
}

.provincia {
    float: left;
    margin-left: 20px;
    width: 300px;
}

HTML

<section class="poblaciones-container">
<section class="poblaciones fila2">
  <div class="provincia">
    <ul>
      <h2>Soria</h2>
            <li>Cuellar</li><li>El Espinar</li>
            <li>Real Sitio de San Ildefonso</li><li>Palazuelos de Eresma</li>
            <li>Cantalejo</li><li>La Lastrilla</li>
            <li>Nava de la Asunción</li><li>San Cristobal de Segovia</li>
            <li>Carbonero del Mayor</li>
          </ul>
        </div>
        <div class="provincia">
          <ul>
            <h2>Segovia</h2>
            <li>Almazán</li><li>Burgo de Osma</li>
            <li>Ólvega</li><li>San Esteban de Gormaz</li>
            <li>Ágreda</li><li>San Leonardo de Yague</li>
            <li>Golmayo</li><li>Covaleda</li>
            <li>Arcos de Jalón</li>
          </ul>
        </div>
        <div class="provincia">
          <ul>
            <h2>Ávila</h2>
            <li>Arévalo</li><li>Arenas de San Pedro</li>
            <li>Las Navas del Marqués</li><li>Candeleda</li>
            <li>Sotillo de la Adrada</li><li>El Tiemblo</li>
            <li>Cebreros</li><li>La Adrada</li>
            <li>El Barco de Ávila</li><li>El Hoyo de Pinares</li>
          </ul>
        </div>
      </section>
</section>

Answer 1

要使用margin: 0 auto;居中元素，您需要指定该元素的宽度。看看我的修复here。

此外，您还有清除浮动的问题。我通过在列表末尾添加clearfix来修复它。

如果宽度是固定的，那就没关系，但是如果你有动态宽度，你可以使用javascript动态添加元素的宽度。

Answer 2

这是solution。

CSS更改：

ul > li{text-align:center;}

希望这有帮助。

修改

抱歉，我误解了你的问题。

以下是解决方案。

.poblaciones-container { border: 1px solid black; display: table; overflow: auto; width: 100%; } .poblaciones { display: table; margin: 0 auto; }

希望这有帮助。

Answer 3

一种简单的方法是使用inline-block显示类型而不是浮点数：

.poblaciones-container {
    width: 1400px;
    border: 1px solid black;
}

.poblaciones {
    margin: 0 auto; /* not needed anymore... */
    overflow: auto; /*  prevent floated elements from overflowing parent */
    outline: 2px dotted gray;
    text-align: center; /* to center the .provincia inline-blocks */
}

.provincia {
    display: inline-block; /* inline-blocks respond to text-align property */
    vertical-align: top; /* align blocks to top edge of parent container */
    text-align: left; /* Keep the content left-aligned, probably a good idea */
    margin-left: 20px; /* may be optional... */
    width: 300px;
    outline: 2px  dashed blue;
}

小提琴：http://jsfiddle.net/audetwebdesign/4q7sb/

这种方法的优点是您不需要将宽度设置为.poblaciones，并且您可以添加其他列表而无需更改CSS或HTML。

如何使包含无序列表的部分居中

3 个答案: