如何在不同的屏幕尺寸下将评论图标居中？

Question

有什么方法可以让评论图标在不同的屏幕尺寸上居中？

我试过文本居中对齐并将显示置于块状，但这会使对齐出错，所以我选择了 span 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

首先，我已经更改了 html 结构，您确实需要为每个操作（如分享等）使用单独的锚标记 <a></a>

工作fiddle：

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 2

你可以 1. 将 .socialBar 中的文本居中对齐 text-align:center 2. 用 float:right 向右浮动的跨度包裹共享文本和图标， 3. 用float:left.

包裹like & like 图标

浮动元素的一个问题是，不会自动计算高度。您必须手动清除浮动。所以我添加了 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 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

在您的媒体查询中，尝试使用 class sq-text。

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

当然，您应该将图标包含在父元素中。

如何在不同的屏幕尺寸下将评论图标居中？

How to center the comment icon at different screen size?

css

media-queries

center

text-align