Bootstrap icon in the middle of a circular button of custom height

Question

Here is my code:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info" style="border-radius:50%;margin-left:10px; margin-top:2px;margin-bottom:2px;height:30px;width:30px;"> <span class="glyphicon glyphicon-plus"> </span> </button> 

I want a circular button with a plus sign inside it. But the problem is that the plus sign doesn't align itself in the middle of the button. Any solution of it? I have to maintain the height (30px), because the button will actually be in a table row with other elements. Like this:

Here the plus sign doesn't appear in the middle. I need a solution to this problem.

JSFiddle: https://jsfiddle.net/x1yvhhc2/

Answer 1

Apply absolute position to the span and center it.

 .btn { position: relative; } .btn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info" style="border-radius:50%;margin-left:10px; margin-top:2px;margin-bottom:2px;height:30px;width:30px;"> <span class="glyphicon glyphicon-plus"> </span> </button> <div class="container"></div> 

Answer 2

You can achieve this by flexbox:

 .some-button { border-radius: 50% !important; margin-left:10px; margin-top: 2px; margin-bottom: 2px; height: 30px; width: 30px; position: relative; } .flex-center-wrapper { display: flex; justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info some-button"> <div class="flex-center-wrapper"> <span class="glyphicon glyphicon-plus"></span> </div> </button>