无法居中对齐文本

Question

我有激活和非激活按钮。这些按钮用作切换按钮。我想在按钮中居中对齐文本。请帮忙。

这是Plunker中的代码sn-p

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

删除高度并使用它可以工作的容器的填充。

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

Answer 3

按钮的填充是问题填充：0px 5px 0px 18px;

尝试像这样改变它

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

这可能不是最好的解决方案

更新

这是一个有效的小提琴：http://codepen.io/anon/pen/WoBVZM?editors=0100

下面是我改的类，只是修改了padding和添加了margin。

我使用填充来修复文本对齐问题，并使用边距使按钮居中。

.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

我发现通过将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 5

你的意思是这样的？

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

您需要添加填充以使文本居中。我已经为选定的活动和非活动选项创建了演示。

在这个类中编辑了填充

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