Pourquoi aucun effet de text-align: center et margin: 0 auto sur l'élément positionné? voir l'exemple en direct

Question

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> 

exemple en direct http://jsbin.com/onavo

si j'utilise le positionnement pour maintenir l'image et le bas que margin: 0 auto ou text-align centre ne fonctionne pas

Ma question est, je veux garder l'alignement verticalement bas et horizontalement centré, dans la boîte rouge.

Answer 1

est ce que vous essayez d'atteindre?

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>