center the comment icon at different screen size

is there a way that I can center the comment icon at different screen size.
I tried text align center and put display to block , but it make the alignment not correct,so I chose span instead http://jsfiddle.net/fkp8d/889/

<div class="socialBar">
      <a href="https://" target='_blank'> 
        <i class="like-icon"></i> <span class="sq-text">Like</span> 
         // center the comment icon at different screen size. 
         // tried text align center and put display to block , 
         // but it make the alignment not correct,so I chose span instead
        <i class="comment-icon"></i> <span class="sq-text">Comment</span> 
        <span style="float:right;margin-right:10px;">
           <i class="share-icon"></i> <span class="sq-text">Share</span>  
        </span> 
      </a>
 </div>

.like-icon {         
  display: inline-block;
  background-image: url(//);
  background-repeat: no-repeat;
  background-position-y: 3px;
  background-size: 13px;
  height: 14px;
  width: 13px; 
  margin-left: 11px;
}


.comment-icon {
 display: inline-block;
 background-image: url(//);
 background-repeat: no-repeat;
 background-size: 13px;
 height: 13px;
 width: 13px;  
}
.share-icon {
  display: inline-block;
  background-image: url(//);
  background-repeat: no-repeat;
  background-size: 12px;
  height: 12px;
  width: 12px  
}