修复将流体容器网格中的最后一行元素对中以使其对齐，同时容器保持居中 [英] Fix centering last line of elements in fluid container grid to be left aligned while container stays centered

问题描述

我遇到问题，将一个ul元素的最后一行对齐到流体容器中。我有容器与页面正确对中，但它最终集中最后一行元素，当他们没有完全填充。似乎无法找出解决方案。

我使用Twitter Bootstrap在container-fluid的外部div的核心。并以列表元素为中心：

  ul {
 text-align：center; 
 list-style：none; 
} 
 
 ul li {
 display：inline-block; 
} 
  

我试过使用text-align：justify，但它似乎不随着页面的大小调整。建议？

下面是发生的两个屏幕截图：

JS Fiddle示例：

I'm having trouble left aligning the last row of a 'ul' element inside a fluid container. I have the container centering properly with the page but it ends up centering the last row of elements when they are not fully populated. Can't seem to figure out the solution.

I'm using Twitter Bootstrap at the very core with container-fluid for the outer div. And centering the list elements like so:

ul {
    text-align: center;
    list-style:none;
}

ul li {
    display: inline-block;
}

I've tried using text-align: justify and centering the div with margins but it doesn't seem to move with the resizing of the page. Suggestions?

Here are two screenshots of what's happening:

JS Fiddle Example: http://jsfiddle.net/Z9uqQ/

Last line should be aligned left with the same vertical edge as 1.

解决方案

If I understand correctly margin: 0 auto will do:

ul {
    width: 90%;
    margin: 0 auto;
}

Demo: http://jsfiddle.net/elclanrs/GdAvm/

这篇关于修复将流体容器网格中的最后一行元素对中以使其对齐，同时容器保持居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！