我正在尝试创建一个带有 X 的小按钮(font-awesome 的 <i class="fa fa-close"></i>
)。我试图让它看起来像这样:
但是,我在让 X 在按钮内居中时遇到了一些问题。
这是标记:
<button class="cart-remove">
<i class="fa fa-close"></i>
</button>
还有CSS:
.cart-remove {
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
background-color: #fff;
border-radius: 50%;
text-align: center !important;
}
不幸的是,字体超棒的关闭图标没有居中,它出现在右下角。我怎样才能解决这个问题?我认为 text-align center 会将元素内的内容居中?
谢谢
最佳答案
你可以尝试将 flexbox 应用到 i 元素居中
$('.cart-remove').click(function() {
var currentCount = $(this).attr('increaseorator');
var currentCountParsed = parseInt(currentCount);
var currentWH = currentCountParsed + 20;
$(this).css({
'width' : currentWH,
'height' : currentWH
});
$(this).attr('increaseorator', currentWH);
});
.cart-remove {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
background-color: #CCC;
border-radius: 50%;
color: black;
}
.cart-remove i {
display: flex;
justify-content: center;
align-items: center;
}
/* ignore, styling */
* { outline: 0; }
*::-moz-focus-inner { border: 0; }
.cart-remove {
border: 1px solid hsla(0, 0%, 0%, 0.5);
background-color: hsla(0, 0%, 70%, 1);
}
.cart-remove:hover {
background-color: red;
}
instructions {
position: absolute;
width: 100%;
left: 50%; transform: translateX(-50%);
bottom: 0;
display: flex;
justify-content: center;
padding-bottom: 40px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="cart-remove" style="width: 20px; height: 20px;" increaseorator="20">
<i class="fa fa-close"></i>
</button>
<instructions>click the x to enlarge, it should remain centered</instructions>
fiddle
关于html - 如何在按钮内居中放置超赞字体图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39156153/