Text kann nicht zentriert werden

Question

Ich habe Schaltflächen als aktiv und deaktiviert. Diese Schaltflächen werden als Umschalter verwendet. Ich möchte den Text in der Mitte zentrieren. Bitte helfen Sie.

Hier ist Code-Schnipsel 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> 

Wie die aktiven und inaktiven Schaltfläche Text zentralisieren?

Answer 1

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

Padding für die Tasten ist das Problem padding: 0px 5px 0px 18px;

versuchen Sie es wie diese

Wechsel

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

Dies kann nicht die beste Lösung sein, da draußen

aktualisieren

Hier ist eine Arbeits Geige: http://codepen.io/anon/pen/WoBVZM?editors=0100

Unten ist die Klasse I geändert, nur Padding und Rand hinzugefügt.

Ich habe Padding verwendet, um das Textausrichtungsproblem und den Rand zu beheben, um die Schaltfläche zu zentrieren.

.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

fand ich, dass die padding: 0 11px; zu .active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button Ihr Problem gelöst werden durch Zugabe. Auch ich habe einen Rand zu .active_inactive_container button hinzugefügt.

Bitte überprüfen Sie die gesamten CSS-Änderungen unten.

.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

Sie meinen so?

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

entfernen Sie die Höhe und spielen mit der Polsterung des Containers wird es funktionieren.

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

Answer 6

Sie müssen die Auffüllung hinzufügen, um den Text in der Mitte zu erhalten. Ich habe eine Demo für die aktive und inaktive Option erstellt.

editierten Polsterung in dieser Klasse

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

Beispiel:

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>