Links not aligning inside the box as they are supposed to - html

Question

I am building a website and right now I'm just about to complete the homepage. Now, the footer has a few links in it along with a few images next to each other like a contact us bar. But the links don't seem to align with the images even after trying everything. They seem to hang a little lower than the paragraphs or spans. I tried converting the spans on the same line to links but now all of them hang low.
HTML:
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
[phone] (Sec. Gen), <!-- was span -->
[phone] (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
CSS:
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
How do I prevent this from happening and what causes it?
What might be the solution to the problem?
Here's my JSFiddle: http://jsfiddle.net/mfxefccz/

Answer 1

You should add to .ic_contact and #ctcLinks this style
display: inline-block;
height: 100%;
vertical-align: middle;
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
display: inline-block;
height: 100%;
vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display: inline-block;
height: 100%;
vertical-align: middle;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
[phone] (Sec. Gen), <!-- was span -->
[phone] (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
Here a demo.
So, displayed it like an inline-block, because display: inline-block; don't work with blocks. And give then a height: 100%. In this case in means 100% from a parent. So we always have an image or block in the vertical center.

Answer 2

You have set margins for .ic_contact. If you remove margin-bottom for .ic_contact, your images and links would align properly. see here
.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}