1. 首页
  2. 问答
  3. 无法居中对齐文本

无法居中对齐文本

2016-12-26 68 views
4

我的按钮处于活动状态并且处于停用状态。这些按钮用作切换。我想要中心对齐按钮中的文本。请帮忙。无法居中对齐文本

这里是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>

如何集中活动和非活动按钮上的文字？

来源

2016-12-26 SKiran

+0

填充的按钮是问题'填充：0像素5像素0像素部18px;'使它甚至和然后正确定位按钮 –

+0

我已经做到了，但现在它在按钮之前添加了更多的填充。 – SKiran

+0

如何在活动按钮之前删除填充？ https://plnkr.co/edit/zTlTDR?p=preview – SKiran

回答

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

来源

2016-12-26 11:38:10

1

填充为按钮的问题填充：0像素5像素0像素部18px;

尝试改变它像这样

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

这可能不是最好的解决办法在那里

更新

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

下面是我改变了课程，只是修改了填充并增加了保证金。

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

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

来源

2016-12-26 11:39:47

+0

它不工作。 – SKiran

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

来源

2016-12-26 11:44:24

0

您的意思是这样的？

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

来源

2016-12-26 11:44:56 jst16

1

删除高度，并使用容器的填充来发挥它的作用。

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

来源

2016-12-26 11:48:25

0

您需要添加填充以获取文本居中。我为所选的活动和非活动选项创建了演示。

在这个类中编辑的填充

.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="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <link data-require="[email protected]" 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="[email protected]" 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>

来源

2016-12-26 12:12:11 Deep

相关问题

 相关问题