1

I'm trying to make a round button with a plus sign in it. I want the plus sign to be big, but even when there's 0 padding, the plus sign cannot be placed in the middle,, can you help me get rid of the spacing on top of the plus sign?

#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;
}
<div>
    <button id="plusbtn">&#43;</button>
</div>
JIJOMON K.A
  • 1,290
  • 3
  • 12
  • 29
Dae
  • 11
  • 1

2 Answers2

0

#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>

You can use display:flex to achieve this. Working example in the code editor.

Utsav Patel
  • 2,789
  • 1
  • 16
  • 26
0

You could always pop your + in a span and add some relative positioning and play around with that until happy, the positions I've added centre it. Otherwise its hard to tell the context of where this will go.

<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;  
}
ultrarun
  • 274
  • 1
  • 13