首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使浮动列表项<li>在div或其<ul>内居中

使浮动列表项<li>在div或其<ul>内居中
EN

Stack Overflow用户
提问于 2011-06-04 17:33:27
回答 2查看 25.3K关注 0票数 16

HTML:

代码语言:javascript
复制
<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>  

我通过创建无序列表来编写一个简单的画廊页面,其中的每个列表项都包含一个图像。

代码语言:javascript
复制
    ul li {
        float: left;
    }

我将容器的宽度设置为"max- width“,这样就可以使列表项(图像)适合浏览器的宽度。这意味着当浏览器窗口调整大小时,它们将被重新排列。

代码语言:javascript
复制
    .imgcontainer{
        max-width: 750px;
    }

现在的问题是,这些图像或列表项没有对齐居中,它们对齐到.imgcontainer body的左侧(下面的链接为灰色),当窗口调整大小时,在右侧留下一个空间!

如何在每次调整窗口大小时将这些图像居中?

这是整个页面/代码,您可以在JS Bin中预览或编辑

http://jsbin.com/etiso5

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-06-04 17:49:24

删除float:left并使用display:inline,以便可以使用text-align:center。将字体大小设置为零,这样图像之间就不会出现空白。

代码语言:javascript
复制
ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

zoom是对旧IE版本的一种改进。然而,这不是一个有效的CSS属性,因此不会通过W3C验证器。

票数 21
EN

Stack Overflow用户

发布于 2013-08-02 07:19:41

这假设所有项目都具有相同的宽度。如果您不希望最后一行项目居中,可以使用几行JavaScript来实现。去掉内联块,文本居中对齐的东西,只需浮动列表元素,并将margin: 0 auto放在列表容器上。

在JS方面,计算内容窗格或窗口的宽度,然后确定一行中可以容纳多少项,即列表容器元素的宽度,然后设置该宽度。这里的itemWidth假设每个列表项的宽度+边距+填充+边框。

代码语言:javascript
复制
var centerListItems = function (itemWidth) {
  var $paneWidth = $('#my-content').width(),
      setWidth;

  setWidth = parseInt(($paneWidth / itemWidth), 10) * itemWidth;

  $('#my-list').width(setWidth);
}

如果希望在调整窗口大小或更改方向时进行更改,可以使用underscore.js取消调用。

代码语言:javascript
复制
var event;

if ('onorientationchange' in window) {
  event = 'onorientationchange';
} else {
  event = 'resize';
}

$(window)
  .off(event)
  .on(event, _.debounce(function () {
    centerListItems(itemWidth);
  }, 350));
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6235938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档