我有一个数字,我想在它旁边放一个星形图标,但在中间。
数字的字体大小可以改变,但星号应该留在中间。
例如:
这是我的CSS:
.my-container {
display: inline-block;
}
.my-text {
font-family: "Courier-new";
font-size:20px
}
.my-icon {
vertical-align: middle;
font-size: 10px;
}
.my-container {
display: inline-block;
}
.my-text {
font-family: "Courier-new";
font-size: 20px
}
.my-icon {
vertical-align: middle;
font-size: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="my-container">
<span class="my-text">5</span>
<span class='icon icon-star my-icon'></span>
</div>
这是我的 jsfiddle:http://jsfiddle.net/k48ttuLn/
最佳答案
我会为此使用 flexbox。无论内容大小如何,它都会垂直居中。
.my-container {
display: flex;
align-items: center;
}
.my-text {
font-family: "Courier-new";
font-size: 20px
}
.my-icon {
vertical-align: middle;
font-size: 10px;
}
<div class="my-container">
<span class="my-text">5</span>
<span class='icon icon-star my-icon'></span>
</div>
参见 A guide to flexbox更多示例和教程
关于html - 从右中间开始带图标的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40929802/