Why no effect of text-align:center and margin:0 auto on positioned element? see live example

CSS

  * {margin:0;padding:0}

/* General styles */

#gallery {
  padding: 2em 0;
  margin: 0 auto;
  width: 840px;
  font: small Verdana, sans-serif;
}

#gallery #photo-grid {
  width: 100%;
  margin: 0;
  padding: 1em 0;
  list-style: none;
}

#gallery #photo-grid li {
        float: left;

  margin: 0 10px 10px 0;
        background: #def;
  color: #333;
        padding: 0.5em 1em;
}


#gallery #photo-grid li span.photo-title { bottom:-28px;
font-style:italic;
position:absolute;
width:200px
}



/* Positioning and initial formatting */

#gallery #photo-grid {
  padding-left: 20px;

}



#gallery #photo-grid li a {text-decoration:none; width: 200px;
  height:200px;display:block;background:red}
#gallery #photo-grid li a img {border:0; display: block;}

HTML

<ul id="photo-grid">

    <li class="photo">
    <a href="#" class="photo-link">
        <img src="http://placehold.it/200x150" class="photo-img" width="200" height="150" >
    <span class="photo-title">${photo-title}</span>
    </a>

    </li>

        <li class="photo">
    <a href="#" class="photo-link">
        <img src="http://placehold.it/150x200" class="photo-img" width="150" height="200">
    <span class="photo-title">${photo-title}</span>
    </a>
    </li>
</ul>

Live example http://jsbin.com/onavo

if i use positioning to keep image and bottom than marg开发者_运维技巧in:0 auto or text-align center doesn't work

My question is , I want to keep align vertically bottom and horizontally centered, in red box.

is this what you're trying to achieved?

CSS

#gallery{overflow:hidden; padding:10px;}
#gallery #photo-grid{list-style: none;}
#gallery #photo-grid .photo{position:relative; display:inline;}
#gallery #photo-grid .photo-img{border:none;}
#gallery #photo-grid .photo-title{position:absolute; bottom:4px; left:0; right:4px; background-color:#FF0000; padding:10px 2px 10px 2px; text-align:center;}

HTML

<div id="gallery">
    <ul id="photo-grid">
        <li class="photo">
            <a href="#" class="photo-link">
                <img src="http://placehold.it/200x150" class="photo-img" width="200" height="150" >
                <span class="photo-title">${photo-title}</span>
            </a>
        </li>    
        <li class="photo">           
            <a href="#" class="photo-link">
                <img src="http://placehold.it/150x200" class="photo-img" width="150" height="200">
                <span class="photo-title">${photo-title}</span>
            </a>           
        </li>
    </ul>
</div>