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

Question

Im planning to make all images inside <ul> , <li> inside <div> . I tried text-align:center , vertical-align:middle; and it doesn't work at all.

First of all, my images would be like this in 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>

My CSS would be like this

#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;
}

Lastly in Jsfiddle HERE .

What I want is all my images to be centered inside the #portfolio-photos . Any ideas?

Answer 1

In your css code you give the ul the following style:

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

When you give an element 100% width the margin: 0 auto; doesn't work. Just change it to 500px for example.

Answer 2

change you css #portfolio-photos li a, #portfolio-photos li like following

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

here is jsFiddle http://jsfiddle.net/jok4rp1m/2/

Answer 3

You can try

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