Placing elements in the Center of a div

This might be silly question however I cant get my head around it. How to put elements(social media icons) in the center, horizontally, in such a way that they don't break,even if the window is resized ? Here is a markup:

<div class="mob_social">
<p1>Your friends might want to fix their iPhones.</p1>
<div class="mob_icon">
    <ul>
        <li><a href="http://ift.tt/eIlFV0">
                    <img src="http://ift.tt/1BG8XCZ" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
<li><a href="http://ift.tt/1kwsCwF">
                    <img src="http://ift.tt/1vL4nLj" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
 <li><a href="https://www.twitter.com">
                    <img src="http://ift.tt/1BG8XD1" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
    </ul>
</div>    

I always get confused and hesitate to ask this question. I just want to know how it can be done. Here is a fiddle I created with the icons. Currently the icons are vertical however how to place them horizontally in the center of the page:

http://ift.tt/1tRnQQu