Not able to center align text

Question

I have buttons as active and deactive. These buttons are used as toggle. I want center align text in button. Please help.

Here is code snippet in Plunker

CSS Code

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #E5E5E5;
  min-width: 1280px;
  overflow: scroll;
}


/* toggle switch style ======================================= */

.profile_status {
  padding: 6px 50px 0px 0px;
}

.active_inactive_container {
  display: inline-block;
  height: 28px;
  border: 1px solid #DFDFDF;
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 2px 0px 2px 2px;
}

.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
  height: 22px;
  background-color: #FFFFFF;
  border: none !important;
  color: #333333;
  border-radius: 15px;
  outline: none;
  font-size: 11px;
  padding: 0px 5px 0px 18px;
}

.clicked_active_button {
  background-color: #51B151 !important;
  color: #FFFFFF !important;
  margin-left: 62px;
  position: absolute;
  opacity: 0;
}

.clicked_active_button1 {
  opacity: 1 !important;
  -webkit-transform: translateX(-140px);
  -ms-transform: translateX(-140px);
  transform: translateX(-140px);
  transition: .1s;
}

.clicked_inactive_button {
  background-color: #f75252 !important;
  color: #FFFFFF !important;
  margin-left: 6px;
  position: absolute;
  opacity: 0;
}

.clicked_active_switch {
  margin-left: 78px !important;
}

Html Code

<div class="active_inactive_container toggle_switch_container">
        <button class="clicked_inactive_button clicked_inactive_switch ng-binding">Inactive</button>
        <button class="active_button ng-binding" ng-click="">Active</button>
        <button class="clicked_active_button clicked_active_switch ng-binding clicked_active_button1" >Active</button>
        <button class="inactive_button ng-binding" >Inactive</button>
    </div>

How to centralize the Active and Inactive button text?

Answer 1

change padding

.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button {
    background-color: #ffffff;
    border: medium none !important;
    border-radius: 15px;
    color: #333333;
    font-size: 11px;
    height: 22px;
    outline: medium none;
    padding: 0 11px;
}

Answer 2

remove the height and play with the padding of the container it will work .

.active_inactive_container {
    display: inline-block;
    border: 1px solid #DFDFDF;
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 6px 10px;
}