CODEWITHSUNDEEP
htmlcss
SKiran
SKiran

Reputation: 115

Not able to center align text

I have buttons as active and deactive. These buttons are used as toggle. I want center align text in button. Please help.

Here is code snippet 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>

How to centralize the Active and Inactive button text?

Upvotes: 4

Views: 567

Answers (6)

Milan Gajjar
Milan Gajjar

Reputation: 701

I found that by adding the padding: 0 11px; to .active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button your problem will be resolved. Also i added some margin to .active_inactive_container button.

Please check the entire CSS Changes below.

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

Upvotes: 2

Flying Gambit
Flying Gambit

Reputation: 1276

Padding for the buttons is the problem padding: 0px 5px 0px 18px;

try changing it like this 

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

This may not be the best solution out there

Update

Here is a working fiddle: http://codepen.io/anon/pen/WoBVZM?editors=0100

Below is the class I changed, just modified padding and added margin.

I used padding to fix the text alignment issue and margin to center the button.

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

Upvotes: 2

Deep
Deep

Reputation: 9804

You need to add the padding to get the text in center. i have created demo for both active and inactive option selected.

edited padding in this class

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

Example :

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>

Upvotes: 1

Nazar Becks
Nazar Becks

Reputation: 177

remove the height and play with the padding of the container it will work . 

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

Upvotes: 2

jst16
jst16

Reputation: 84

You mean like this?

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

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

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

Upvotes: 2

Related Questions