如何在不同的屏幕尺寸下将评论图标居中?
How to center the comment icon at different screen size?
有什么方法可以让评论图标在不同的屏幕尺寸上居中?
我试过文本居中对齐并将显示置于块状,但这会使对齐出错,所以我选择了 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
}
请帮忙。
谢谢。
首先,我已经更改了 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;
}
你可以
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>
我的建议是为每个元素制作一个 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>
试试这个
<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>
在您的媒体查询中,尝试使用 class sq-text。
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
text-align: center;
当然,您应该将图标包含在父元素中。
有什么方法可以让评论图标在不同的屏幕尺寸上居中?
我试过文本居中对齐并将显示置于块状,但这会使对齐出错,所以我选择了 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
}
请帮忙。
谢谢。
首先,我已经更改了 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;
}
你可以
1. 将 .socialBar 中的文本居中对齐 text-align:center
2. 用 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>
我的建议是为每个元素制作一个 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>
试试这个
<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>
在您的媒体查询中,尝试使用 class sq-text。
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
text-align: center;
当然,您应该将图标包含在父元素中。