Не удалось выровнять по центру текст

Question

У меня есть кнопки как активные и деактивированные. Эти кнопки используются для переключения. Я хочу, чтобы текст центра выравнивался в кнопке. Пожалуйста помоги.

Вот фрагмент кода в Plunker

CSS код

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 код

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

Как централизовать активные и неактивные текст кнопки?

Answer 1

изменение обивка

.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

Набивка для кнопок проблема обивка: 0px 5px 0px 18px;

попробуйте изменить его, как этот

padding: 0px 10px 0px 10px; 
margin: 0px 0px 0px 23px; 

Это не может быть лучшим решением там

Update

Вот рабочая скрипку: http://codepen.io/anon/pen/WoBVZM?editors=0100

Ниже класс I изменен, просто изменено дополнение и добавленный запас.

Я использовал прописку, чтобы исправить проблему выравнивания текста и маржу, чтобы центрировать кнопку.

.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 3

Я обнаружил, что при добавлении к padding: 0 11px;.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button вашей проблемы будет решено. Также я добавил некоторый запас к .active_inactive_container button.

Пожалуйста, проверьте все изменения CSS ниже.

.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 4

Вы имеете в виду вот это?

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 5

удалите высоту и играйте с заполнением контейнера, это сработает.

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

Answer 6

Необходимо добавить отступы, чтобы получить текст в центре. Я создал демонстрацию как для активной, так и для неактивной опции.

отредактированный обивка в этом классе

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

Пример:

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>