How to center the comment icon at different screen size?

Question

Is there a way that I can center the comment icon at a different screen size?

I tried text align center and put display to block, but it makes the alignment go wrong, 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  
}

Please help.

Thanks.

Answer 1

You can 1. Center align the text within the .socialBar with text-align:center 2. wrap the Share text & icon with a span that floats right with float:right, 3. wrap the like & like icon with float:left.

An issue with floating elements is that, the height will not be auto-calculated. You have to clear the floats manually. So I have added Clearfix

.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;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.socialBar {
  text-align: center;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* close commented backslash hack */

<div class="socialBar clearfix">
  <a href="https://" target='_blank'>
    <span class="float-left">
        <i class="like-icon"></i> <span class="sq-text">Like</span>
    </span>
  </a>
  <a href="https://" target='_blank'>
    <i class="comment-icon"></i>  <span class="sq-text">Comment</span> 
  </a>
  <a href="https://" target='_blank'>
    <span class="float-right">
           <i class="share-icon"></i> <span class="sq-text">Share</span> 
    </span>
  </a>
</div>