无法居中对齐文字

时间：2016-12-26 11:30:46

标签： html css

我将按钮设置为活动且无效。这些按钮用作切换。我希望按钮中的中心对齐文本。请帮忙。

以下是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>

如何集中活动和非活动按钮文本？

6 个答案:

答案 0 :(得分：2)

更改填充

 UIToolbar.appearance().isTranslucent = false

答案 1 :(得分：2)

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

尝试像这样改变它

SELECT * 
FROM table
WHERE id =  '1'
OR concat(',',column1,',') like  '%,18,%'
OR concat(',',column2,',') like  '%,18,%'
ORDER BY id
DESC
LIMIT 0 , 30

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

<强>更新

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

以下是我更改的课程，只修改了填充并增加了边距。

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

  [1]: http://jsfiddle.net/mk4q332q/

答案 2 :(得分：2)

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

答案 3 :(得分：2)

移除高度并使用容器的填充它将起作用。 

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

答案 4 :(得分：1)

你的意思是这样吗？

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

答案 5 :(得分：1)

您需要添加填充以将文本置于中心。我为所选的活动和非活动选项创建了演示。

在此课程中编辑了填充

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

示例：

＆＃13;
＆＃13; 
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
 
  
});
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题