我建了一个圆形div。我想知道数字文本可以在div中水平居中,而字体图标位于其右上角,如何实现? div的定义是:
.rating-score {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
line-height: 50px;
display: block;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
background-color: #ff6666;
color: #fff;
}
.question-mark {
font-size: 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rating-score">
8.9<span class="fa fa-question-circle question-mark"></span>
</div>
我在这里建立了一个jsfiddle: round div with text and font icon
答案 0 :(得分:0)
将position: relative;
提供给.rating-score
,将position: absolute;
提供给.question-mark
,然后调整top
,left
将提供您的预期输出。
.question-mark {
font-size: 12px;
position: absolute;
right: 10px;
top:1px;
}
答案 1 :(得分:0)
试试这个:
您可以将.rating-score
position:absolute
更改为position:relative
,但如果您不进行更改,它也可以有效。
.question-mark {
font-size: 12px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
答案 2 :(得分:0)
图标必须是绝对定位的,而父母的位置必须相对如此
.rating-score {
position: relative;
top: 10px;
left: 10px;
width: 60px;
height: 60px;
line-height: 60px;
display: block;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
background-color: #ff6666;
color: #fff;
}
.question-mark {
font-size: 12px!important;
position: absolute;
top: 8px;
right: 9px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rating-score">
8.9<span class="fa fa-question-circle question-mark"></span>
</div>