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

Posted 2023-03-29

【中文标题】如何在不同的屏幕尺寸上居中评论图标？

【英文标题】：How to center the comment icon at different screen size?

【发布时间】：2016-10-24 21:28:01

【问题描述】：

有没有办法让评论图标在不同的屏幕尺寸居中？

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

请帮忙。

谢谢。

【问题讨论】：

使用媒体查询...例如@media screen and (max-width: 600px) change your css here

我使用了媒体查询，但即使我使用 .comment-icon left-margin: n%;

有什么理由让所有图标都在同一个a标签内？

只想将所有图标链接到同一个网页

类似jsfiddle.net/fkp8d/891 ??

【参考方案1】：

你可以 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>

【讨论】：

很高兴包含 clearfix，但所有这些都可以恢复到 clearfix:aftercontent:""; display:table; clear:both;

复制和粘贴为跨浏览器兼容性而编写的额外样式的旧习惯。是的，如果您考虑上面的 IE9，那么您是正确的，那么您建议的那个就可以了

【参考方案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;

【参考方案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>

【参考方案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>

【参考方案5】：

在您的媒体查询中，试试这个类 sq-text。

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

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