Css 如何将注释图标置于不同屏幕大小的中心？

是否有一种方法可以将注释图标置于不同屏幕大小的中心

我尝试将文本居中对齐并将显示置于块中，但这会使对齐出错，因此我选择了“跨距”

.like图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景位置y:3px；
背景尺寸：13px；
高度：14px；
宽度：13px；
左边距：11px；
}
.评论图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：13px；
高度：13px；
宽度：13px；
}
.共享图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：12px；
高度：12px；
宽度：12像素
}

请帮忙

---

谢谢。

首先，我已经更改了html结构，您真的需要单独的锚定标记

首先，我改变了html结构，你真的需要单独的锚定标签

你可以
1.将.socialBar中的文本居中对齐
text align:Center
2.将共享文本和图标包装成一个范围，该范围使用
float:right
向右浮动，
3.用
float:left
包裹like&like图标

浮动图元的一个问题是，不会自动计算高度。您必须手动清除浮动。因此，我添加了
Clearfix


.like图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景位置y:3px；
背景尺寸：13px；
高度：14px；
宽度：13px；
左边距：11px；
}
.评论图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：13px；
高度：13px；
宽度：13px；
}
.共享图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：12px；
高度：12px；
宽度：12px；
}
.向左浮动{
浮动：左；
}
.向右浮动{
浮动：对；
}
socialBar先生{
文本对齐：居中；
}
.clearfix:之后{
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}
.clearfix{
显示：内联块；
}
/*开始反斜杠攻击\*/
*html.clearfix{
身高：1%；
}
.clearfix{
显示：块；
}
/*关闭带注释的反斜杠hack*/

您可以
1.将.socialBar中的文本居中对齐
text align:Center
2.将共享文本和图标包装成一个范围，该范围使用
float:right
向右浮动，
3.用
float:left
包裹like&like图标

浮动图元的一个问题是，不会自动计算高度。您必须手动清除浮动。因此，我添加了
Clearfix


.like图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景位置y:3px；
背景尺寸：13px；
高度：14px；
宽度：13px；
左边距：11px；
}
.评论图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：13px；
高度：13px；
宽度：13px；
}
.共享图标{
显示：内联块；
背景图片：url（/）；
背景重复：无重复；
背景尺寸：12px；
高度：12px；
宽度：12px；
}
.向左浮动{
浮动：左；
}
.向右浮动{
浮动：对；
}
socialBar先生{
文本对齐：居中；
}
.clearfix:之后{
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}
.clearfix{
显示：内联块；
}
/*开始反斜杠攻击\*/
*html.clearfix{
身高：1%；
}
.clearfix{
显示：块；
}
/*关闭带注释的反斜杠hack*/
我的建议是为每个元素制作一个
标记，然后根据
文本对齐：对齐
使用此技巧以获得所需的输出：


.socialBar{
文本对齐：对齐；
}
.socialBar:之后{
内容：“；
显示：内联块；
宽度：100%；
}
socialBar一号酒店{
背景：黑色；
显示：内联块；
宽度：15px；
高度：15px；
垂直对齐：顶部；
}
我的建议是为每个元素制作一个
标记，然后根据
文本对齐：对齐
使用此技巧以获得所需的输出：


.socialBar{
文本对齐：对齐；
}
.socialBar:之后{
内容：“；
显示：内联块；
宽度：100%；
}
socialBar一号酒店{
背景：黑色；
显示：内联块；
宽度：15px；
高度：15px；
垂直对齐：顶部；
}

试试这个

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


socialBar先生{
文本对齐：居中；
宽度：100%；
}
社会银行{
文本对齐：居中；
}
.像{
浮动：左；
}
.分享{
浮动：对；
}
试试这个

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


socialBar先生{
文本对齐：居中；
宽度：100%；
}
社会银行{
文本对齐：居中；
}
.像{
浮动：左；
}
.分享{
浮动：对；
}
在您的媒体查询中，为该类文本提供一个快照

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

当然，您应该在父元素中包含图标。
在媒体查询中，为类sq文本提供一个快照

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

当然，您应该在父元素中包含图标。
使用媒体查询。。。示例@media screen和（最大宽度：600px）{在这里更改css}我使用了媒体查询，但它没有居中，即使我使用了；有没有理由将所有图标放在同一个
a
标签中？只想将所有图标链接到同一个网页类似这样的内容？？使用媒体查询。。。示例@media screen和（最大宽度：600px）{在这里更改css}我使用了媒体查询，但它没有居中，即使我使用了；有没有理由把所有图标都放在同一个
a
tag中？只想把所有图标链接到同一个网页，比如这样的东西？？很高兴包含clearfix，
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
text-align: center;