Need help centering social media icons in the a footer on a website

Question

I have been stuck on something very simple for over a day now and I have to ask for help. I am trying to do something simple as centering vertically my social media icons in my footer. I tried to take the same route when someone helped me with the Navigation Bar but I just cannot seem to grasp/understand something to get the same result.

I thought about doing padding but I was not sure if that still would take care of re-sizing or smaller screens, so I wanted to take more a percent route instead of flat amount.

Website for Inspect

Footer HTML:

<!-- Social Media + Footer -->
<div class="container">
    <div class="navbar navbar-fixed-bottom">
        <div class="collapse navbar-collapse">            
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav navbar-nav">
                        <li>
                            <img src="link/ico-facebook.png"
                                 alt="Facebook Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                        <li>
                            <img src="link/ico-twitter.png"
                                 alt="Twitter Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                    </ul>
                </div>
            </div>
        </div>            
    </div>
</div>
<!-- End of Social Media + Footer -->

CSS:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 0 0 0;
    position: relative;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.navbar {
    position: relative;
    min-height: 100px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

@media (min-width: 768px) .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-collapse {
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.collapse {
    display: none;
}

@media (min-width: 768px).navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0;
}

.navbar-nav {
    margin: 7.5px -15px;
    text-align: center;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

@media (min-width: 768px).navbar-nav>li {
    display: inline-block!important;
}

.nav>li {
    position: relative;
    display: inline-block!important;
}

img.element.style {
    width: 100%;
    height: auto;
    max-width: 32px;
}

img {
    vertical-align: middle;
}

Answer 1

I was the one who answered you the first time, so here I go again to make sure you understand how it works.

First, let's do a tiny change in your HTML markup, as follows:

<!-- Social Media + Footer -->
<div class="container">
    <div class="navbar navbar-fixed-bottom">
        <div class="collapse navbar-collapse vertimid">            
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav navbar-nav">
                        <li>
                            <img src="link/ico-facebook.png"
                                 alt="Facebook Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                        <li>
                            <img src="link/ico-twitter.png"
                                 alt="Twitter Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                    </ul>
                </div>
            </div>
        </div>            
    </div>
</div>
<!-- End of Social Media + Footer -->

If you pay attention, I have only added the class .vertimid to the line

<div class="collapse navbar-collapse">

we do this in order to accurately target that class so you can re-use it later, as I told you the other day.

Now, you do add this property to

.navbar-collapse.vertimid{display:inline-block} /* replaces display:table */

and that's it.

Remember: you need to vertical align elements relative to the container block. Also, as we're at it, be sure to check your site in Firefox, because you'll find out your social media icons aren't there

Answer 2

You could do it by apply some custom CSS to your HTML elements:

<div class="navbar navbar-fixed-bottom" style="display: table !important; width: 100%;">
  <div class="collapse navbar-collapse" style="vertical-align: middle;display: table-cell !important;">
  ......
  ......
  </div>
</div>

Answer 3

Decide what height percentage of the footer you want your social media icons to be...suppose 30%:

ul.nav {
    height:30%;
    margin-top:35%;
    margin-bottom:35%;    
}