Center img in element

by Alvin Olavarrieta

HTML

<ul>
    <li class="li">
         <img src="http://img2.wikia.nocookie.net/__cb20131206190417/walkingdead/images/7/78/Wallpaper-actors-hollywood-movie-star-jason-statham-wallpaper.jpg" alt="" height="210" />
    </li>
</ul>

CSS

ul {
    margin: 0;
    padding: 20px 0 0 20px;
}
.li {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
    
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    border: none;
}

.li img {
    vertical-align: middle;
}

JavaScript

//<img src="http://placehold.it/100x100/" height="161" width="215" alt=""/>