Need help in aligning pictures with text

Question

I have coded a website using, HTML, CSS and Jscript. In this website, in the footer section, I have placed the social site links, such as- facebook, twitter, youtube, google+, as follows:

As you can see, the icons are not aligned with the text; I am asking for help in aligning them.

HTML:

<footer>
Find us @ 
<a href=""><img src="assets/images/facebook.png" alt="facebook"></a> 
<a href=""><img src="assets/images/twitter.png" alt="twitter"></a> 
<a href=""><img src="assets/images/google+.png" alt="google plus"></a> 
<a href=""><img src="assets/images/youtube.png" alt="youtube"></a>
</footer>

CSS:

footer                  {    
                        color: white;
                        width: 100%;
                        font-family: Arial, sans-serif;
                        font-weight: bold;
                        font-size: 10px;
                        background-color: black;
                        height: 30px;
                        text-align: center;
                        }


footer img              {
                        padding-top: 5px;
                        padding-bottom: 0px;
                        }

Answer 1

Use vertical-align to align the text and icons. In addition, if you remove the height from the footer but give it padding you'll no longer the need to mess with the padding in order to balance it.

See this jsFiddle or the snippet below. Try changing the image height to see how the vertical centering is maintained:

footer {    
    color: white;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    background-color: black;
    /*height: 30px; < Remove the height, let the content hold it open and adjust it with padding*/
    text-align: center;
    padding:5px 0; /* < Add some padding here instead of on the images */
}

footer img {
    /*padding-top: 5px; < Remove this padding */
    /*padding-bottom: 0px; < Remove this padding */
    vertical-align:middle; /*< Add vertical alignment */
    height:20px; width:20px; /*< This is just for testing because the sample images dont exist. Change the height to test the verticle alignment */
}

<footer>
Find us @ 
    <a href=""><img src="assets/images/facebook.png" alt="facebook" /></a> 
    <a href=""><img src="assets/images/twitter.png" alt="twitter" /></a> 
    <a href=""><img src="assets/images/google+.png" alt="google plus" /></a> 
    <a href=""><img src="assets/images/youtube.png" alt="youtube" /></a>
</footer>

Alternatively you could consider using an icon font instead of images. https://icomoon.io/ is a great resource for these. Here's an example of how you might use an icon font to achieve this:

@font-face {
	font-family: 'icomoon';
	src:url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.eot?3t0141');
	src:url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.eot?#iefix3t0141') format('embedded-opentype'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.woff?3t0141') format('woff'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.ttf?3t0141') format('truetype'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.svg?3t0141#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
footer {    
    color: white;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    background-color: black;
    /*height: 30px; < Remove the height, let the content hold it open and adjust it with padding*/
    text-align: center;
    padding:5px 0; /* < Add some padding here instead of on the images */
}
footer a {
    font-size:20px;
    color:#eee;
    text-decoration:none;
    vertical-align:middle;
    transition: all 0.3s ease;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
footer a:hover {
    color:red;
}

<footer>
Find us @ 
    <a href="">f</a> 
    <a href="">t</a> 
    <a href="">g</a> 
    <a href="">y</a>
</footer>

Answer 2

Add vertical-align:middle; to your image CSS:

footer img {
    padding-top: 5px;
    padding-bottom: 0px;
    vertical-align:middle;
}

Note that you may need to adjust your padding.

Answer 3

One way to solve this: your text should have the same line-height with your icons size. Hopefully, your code is inside a wrapper, like this:

    <div class="some-wrapper">Find us: @ <img src="facebook.png"><img src=twitter.png"><img src="googleplus.png"><img src="youtube.png"></div>

In case your icons are, lets say, 16px in height, the CSS for this one will be

.some-wrapper {
    line-height: 16px;
}