trying to center an image in my nav bar - html

Question

I have a bootstrap navbar. I have 3 pictures. I want one to pull right, one to pull left, and one to be in the center. I got the right and left, can't figure out how to center the last image. Tried CSS and wrapping it in a <p>, but it makes a separate line from the rest of the images.
Is there some CSS/bootstrap/html trick I'm not aware of?
<div class="nav navbar-inverse navbar-fixed-bottom">
<div class="container">
<img class="contactPicture pull-center" src="img/gmailIcon.png">
<img class="contactPicture pull-left" src="img/githubIcon.png">
<img class="contactPicture pull-right" src="img/linkedinIcon.png">
</div>
</div>

Answer 1

Asumming that the images are in relative positioning. You should just re-order your html?
So instead of:
<img class="contactPicture pull-center" src="img/gmailIcon.png">
<img class="contactPicture pull-left" src="img/githubIcon.png">
<img class="contactPicture pull-right" src="img/linkedinIcon.png">
You want:
<img class="contactPicture pull-left" src="img/githubIcon.png">
<img class="contactPicture pull-center" src="img/gmailIcon.png">
<img class="contactPicture pull-right" src="img/linkedinIcon.png">
if all else fails you can wrap it in a which may or may not work depending on your css.

Answer 2

I don't think there is any built it way to do this so you'll (most likely) have to position it yourself. Here's an example.
See Snippet.
.footer-img-center {
left: 50%;
position: absolute;
margin-left: -25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav navbar-inverse navbar-fixed-bottom">
<div class="container">
<img class="contactPicture pull-left" src="http://placehold.it/50x50/f00">
<img class="contactPicture footer-img-center" src="http://placehold.it/50x50/fff">
<img class="contactPicture pull-right" src="http://placehold.it/50x50/ff0">
</div>
</div>

Answer 3

Since there's no "pull-center" in bootstrap, you can keep your markup the same and add the following to the CSS:
.nav .container {text-align:center;}
http://www.bootply.com/hsZ9HaJJmO

Answer 4

Okay folks, figure this one out. Put the image, in a row, in a col. Put the trouble image as a brand. here's my html
<div class="nav navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="contactPicture pull-left" src="img/githubIcon.png">
</div>
<div class="col-md-4">
<a class="navbar-brand-gmail" href="#"><img class="contactPicture gmail" src="img/gmailIcon.png"></a>
</div>
<div class="col-md-4">
<img class="contactPicture pull-right" src="img/linkedinIcon.png">
</div>
</div>
</div>
</div>
here's my custom css, taken from here http://www.bootply.com/9SOuY3vHlF
.navbar-brand-gmail {
position: absolute;
width: 100%;
left: 0;
text-align: center;
padding-top: 0;
margin: auto;}
the only thing I changed was adding padding top to zero, so it's in line with the other images.