Question

我打算在<ul>内的<li>，<div>内制作所有图像。我尝试了text-align:center，vertical-align:middle;，但它根本不起作用。

首先，我的图片在HTML中就像这样

<div id="portfolio-photos">
            <ul>
                <li>
                    <img src="" /> </a>
                </li>

                <li>
                    <img src="" /> </a>
                </li>

                <li>
                    <img src="" /> </a>
                </li>

                <li>
                    <img src="" /> </a>
                </li>

                <li>
                    <img src="" /> </a>
                </li>

                <li>
                    <img src="" /> </a>
                </li>
            </ul>
        </div>

我的CSS就像这样

#portfolio-photos {
      list-style:none;
      margin:0 auto;
      padding:20px 0;
      width:500px;
      text-align: center;
      border:1px solid #CCC;
}
#portfolio-photos ul {
            padding: 0;
            font-size: 14px;
            line-height: 14px;
            margin: 0 auto;
            text-align:center;
            display: inline-block;
            width:100%;
}

#portfolio-photos li {
  border:1px solid #CCC;
  margin:10px;
  box-shadow: 1px 1px 1px #5F9EA0;
}

#portfolio-photos li a, #portfolio-photos li {
    width: 50px;
    height: 100px;
    display: block;
    float: left;
}

最后在Jsfiddle HERE。

我想要的是我的所有图像都集中在#portfolio-photos内。有什么想法吗？

Answer 1

在你的css代码中，你给ul以下样式：

#portfolio-photos ul {
        padding: 0;
        font-size: 14px;
        line-height: 14px;
        margin: 0 auto;
        text-align:center;
        display: inline-block;
        width:100%;
}

当您提供元素100% width时，margin: 0 auto;不起作用。只需将其更改为500px即可。

Answer 2

改变你的css #portfolio-photos li a, #portfolio-photos li，如下所示

#portfolio-photos li a, #portfolio-photos li {
width: 50px;
height: 100px;
display: inline-block; /*change to inline-block */
/*float: left;  remove */
}

这里是jsFiddle http://jsfiddle.net/jok4rp1m/2/

Answer 3

你可以尝试

<div id="portfolio-photos">
<ul>
<center><img src="img.gif" /> </a></center>
</ul>
<li>
<center><img src="img.gif" /> </a></center>
</li>
</div>

使用<ul> <li> div内部对齐中心</li> </ul>

3 个答案: