центр значок комментария на разном размере экрана

Question

есть способ, которым я могу центрировать значок комментария при разном размере экрана.
Я попытался выравнивание текста центр и поставить дисплей блокировать, но сделать выравнивание не правильно, поэтому я выбрал интервал вместо 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 
} 

Answer 1

Вы можете 1. Центр выровнять текст в .socialBar с text-align:center 2. оберните Share текст & значок с пролетом, который плавает прямо с float:right, 3. оберните как & как значок с float:left.

Проблема с плавающими элементами заключается в том, что высота не будет автоматически рассчитана. Вы должны очистить поплавки вручную. Поэтому я добавил 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>

Answer 2

Первые вещи сначала, я изменил структуру HTML, Вы действительно хотите якорные теги разделенным <a></a> для каждого действия (например, акции и т.д.) ..

Работа скрипку:

http://jsfiddle.net/fkp8d/892/

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

CSS

.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 
} 

.socialBar { 
    text-align: center; 
} 

.socialCenter, 
.socialRight { 
    display: inline-block; 
} 
.socialRight { 
    float: right; 
} 

Answer 3

То, что я предлагаю вносит a тег для каждого элемента, а затем использовать этот трюк, основанный на text-align:justify, чтобы получить желаемый результат:

.socialBar { 
 
    text-align: justify; 
 
} 
 
.socialBar:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.socialBar i { 
 
    background:black; 
 
    display:inline-block; 
 
    width:15px; 
 
    height:15px; 
 
    vertical-align:top; 
 
}

<div class="socialBar"> 
 
    <a href="#"><i class="like-icon"></i>Like</a> 
 
    <a href="#"><i class="comment-icon"></i>Comment</a> 
 
    <a href="#"><i class="share-icon"></i>Share</a> 
 
</div>

Answer 4

Попробуйте это

<div class="socialBar"> 
    <a href="#" class="like"> 
     <i class="like-icon"></i> <span class="sq-text">Like</span> 
    </a> 
    <a href="#" class="comment"> 
     <i class="comment-icon"></i> <span class="sq-text">Comment</span> 
    </a> 
    <a href="#" class="share"> 
     <i class="share-icon"></i> <span class="sq-text">Share</span> 
    </a> 
</div> 
<style> 
.socialBar{ 
text-align:center; 
width:100%; 
} 
.socialBar a{ 
text-align:center; 
} 
.like{ 
float:left; 
} 
.share{ 
float:right; 
} 
</style> 

Answer 5

В запросе на медиатеку дайте этот снимок для класса sq-text.

width: 100px; 
position: absolute; 
left: 50%; 
margin-left: -50px; 
text-align: center; 

Конечно, вы должны содержать значок в родительском элементе.