html让文字不居中显示,html – 无法居中对齐文本

我有按钮作为活动和非活动.这些按钮用作切换.我希望按钮中的中心对齐文本.请帮忙.

这是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代码

Inactive

Active

Active

Inactive

如何集中Active和Inactive按钮文本？