Not able to center align text - html

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;
}

Answer 3

Padding for the buttons is the problem padding: 0px 5px 0px 18px;
try changing it like this
padding: 0px 10px 0px 10px;
margin: 0px 0px 0px 23px;
This may not be the best solution out there
Update
Here is a working fiddle: http://codepen.io/anon/pen/WoBVZM?editors=0100
Below is the class I changed, just modified padding and added margin.
I used padding to fix the text alignment issue and margin to center the button.
.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 10px 0px 10px;
margin: 2px 5px;
}

Answer 4

I found that by adding the padding: 0 11px; to .active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button your problem will be resolved. Also i added some margin to .active_inactive_container button.
Please check the entire CSS Changes below.
.active_inactive_container button{
margin:3px;
}
.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: 0 11px;
}

Answer 5

You mean like this?
body {
font-family: 'Montserrat', sans-serif;
background-color: #E5E5E5;
min-width: 1280px;
overflow: scroll;
}
.profile_status {
padding: 6px 50px 0px 0px;
}
.active_inactive_container {
display: table;
border: 1px solid #DFDFDF;
background-color: #FFFFFF;
border-radius: 15px;
}
.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
display: table-cell;
vertical-align: middle;
padding: 1rem;
background-color: #FFFFFF;
border: none !important;
color: #333333;
border-radius: 15px;
text-align: center;
outline: none;
font-size: 11px;
margin: 0;
}

Answer 6

You need to add the padding to get the text in center. i have created demo for both active and inactive option selected.
edited padding in this class
.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 18px 0px 18px;
}
Example :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
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 18px 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_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;
}
.clicked_inactive_switch {
margin-left: 198px !important;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as $ctrl">
<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="$ctrl.toggleSwitchOn()">Active</button>
<button class="clicked_active_button clicked_active_button1 clicked_active_switch ng-binding " >Active</button>
<button class="inactive_button ng-binding" ng-click="$ctrl.toggleSwitchOff()">Inactive</button>
</div>
<div class="active_inactive_container toggle_switch_container">
<button class="clicked_inactive_button clicked_inactive_switch clicked_inactive_button1 ng-binding">Inactive</button>
<button class="active_button ng-binding" ng-click="$ctrl.toggleSwitchOn()">Active</button>
<button class="clicked_active_button clicked_active_switch ng-binding " >Active</button>
<button class="inactive_button ng-binding" ng-click="$ctrl.toggleSwitchOff()">Inactive</button>
</div>
</body>
</html>