How to align text under each image in CSS

In this article, i am going to give some overview on how to align text under image in CSS.

HTML Code

    <div class="images">
                <ul>
                    <li><span><a href="#">
                        <img src="http://i1.asp.net/images/ui/asplogo-square.png?cdn_id=2014-05-21-001" /></a></span>
                        <a href="">See More...</a>
                    </li>
                    <li><a href="#">
                        <img src="http://i1.asp.net/images/ui/asplogo-square.png?cdn_id=2014-05-21-001" /></a>
                        <a href="">See More...</a>
                    </li>
                    <li><span><a href="#">
                        <img src="http://i1.asp.net/images/ui/asplogo-square.png?cdn_id=2014-05-21-001" /></a></span>
                        <a href="">See More...</a>
                    </li>
                    <li><a href="#">
                        <img src="http://i1.asp.net/images/ui/asplogo-square.png?cdn_id=2014-05-21-001" /></a>
                        <a href="">See More...</a>
                    </li>
                    <li><span><a href="#">
                        <img src="http://i1.asp.net/images/ui/asplogo-square.png?cdn_id=2014-05-21-001" /></a></span>
                        <a href="">See More...</a>
                    </li>
                </ul>
    </div>

CSS Code

.images {
display:block;
}

.images ul li {
display:inline;
list-style:none;
float:left;
text-align:center;
color:#000;
margin:0 10px 10px 0;
}

.images ul li a img {
border:6px solid #e1d9ec;
border-radius:50%;
width:150px;
height:150px;
}

.images ul li a {
display:block;
margin-bottom:5px;
opacity:0.8;
font-family:Verdana;
font-size:12px;
text-decoration:none;
letter-spacing:1px;
}

.images ul li a:hover {
opacity:1.0;
}

Output

That’s it!!…..Happy Programming...