Question

我正在尝试制作一个带有加号的圆形按钮。我希望加号很大，但是即使填充为0，加号也不能放在中间，您能帮我摆脱加号顶部的间距吗？

/rest

#plusbtn {
    width: 35px;
    height: 35px;
    border-bottom: solid 2px #4F3C35;
    background-color:#377BB5;
    color:white;
    border-radius:50%;
    font-size:35px;
    display:inline-block;
    margin: 15px 10px;
    position: relative;
    vertical-align: top;
}

Answer 1

#plusbtn {
    width: 35px;
    height: 35px;
    border-bottom: solid 2px #4F3C35;
    background-color:#377BB5;
    color:white;
    border-radius:50%;
    font-size:35px;
    display:flex;
    margin: 15px 10px;
  justify-content:center;
  align-items: center;
    position: relative;
    vertical-align: top;
}

<div>
    <button id="plusbtn">&#43;</button>
</div>

您可以使用display:flex来实现。代码编辑器中的工作示例。

Answer 2

您总是可以在跨度中弹出+，并添加一些相对位置，然后进行相应的处理，直到满意为止，我添加的位置将其居中。否则，很难说清将要去哪里。

<div>
<button id="plusbtn"><span>&#43;</span></button>
</div>

#plusbtn {
width: 35px;
height: 35px;
border-bottom: solid 2px #4F3C35;
background-color:#377BB5;
color:white;
border-radius:50%;
font-size:35px;
display:inline-block;
margin: 15px 10px;
position: relative;
vertical-align: top;
}

#plusbtn span{
position:relative;
top:-9px;
left:-1px;  
}

带加号的按钮，删除填充

2 个答案: