使用對齊中心 <ul><li> 內部div

Question

我打算在<div>內的<ul> ， <li>內制作所有圖像。 我嘗試了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 這里 。

我想要的是將我所有的圖像都放在#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為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>