How to center text of the column headers in SlickGrid?

How do I center a (header)column text in SlickGrid ? ... the class I added via headerCssClass is header-number ... the text in below example is "RANK".

This is what I tried from another StackOverflow post from 8 years ago ... but it doesn't work

.slick-header-column.header-number {
    text-align: center;
}

HTML with styles of the column element :

<!DOCTYPE html>
<html class="k-ie k-ie11">
<head>
<title></title>
<style>
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #da1a1a;
	font-weight: normal;
	color: #454545;
}
.slick-header-column {
	background-color: #E0E0E0;
	border-right: 1px solid silver;
}
.slick-header-column.ui-state-default {
	position: relative;
	display: inline-block;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	height: 16px;
	line-height: 16px;
	margin: 0;
	padding: 4px;
	border-right: 1px solid silver;
	border-left: 0px !important;
	border-top: 0px !important;
	border-bottom: 0px !important;
	float: left;
}
.slick-header-column.header-number {
	text-align: center;
}
.slickgrid_501462 .slick-header-column {
	left: 1000px;
}
.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
	position: relative;
	white-space: nowrap;
	cursor: default;
	overflow: hidden;
}
.slick-header-columns {
	background-color: #E0E0E0;
	border-bottom: 1px solid silver;
}
.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
	width: 100%;
	overflow: hidden;
	border-left: 0px !important;
}
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.content-section {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.main {
	height: 100%;
	width: 100%;
	position: fixed;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
body {
	font-family: sans-serif, "Lato", Calibri, Arial;
	font-size: 0.8em;
}
html body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.slick-sort-indicator {
	display: inline-block;
	width: 8px;
	height: 5px;
	margin-left: 4px;
	margin-top: 6px;
	float: left;
}
.slick-column-name, .slick-sort-indicator {
	display: inline-block;
	float: left;
	margin-bottom: 100px;
}
.slick-column-name, .slick-sort-indicator {
	margin-bottom: 0px;
}
.slick-header-menubutton {
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 12px;
	cursor: pointer;
	padding-left: 2px;
	display: none;
	border-left: thin ridge silver;
}
.slick-header-down::after {
	font-family: FontAwesome;
	content: "\f0d7";
	font-weight: 900;
	color: black;
}
.slick-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	cursor: col-resize;
	width: 4px;
	right: 0px;
	top: 0px;
	height: 100%;
}
</style>
</head>
<body><div class="main"><div class="content-section" id="content-section"><div class="slickgrid_501462 ui-widget" id="ScClaCategoryGrid" style="outline: 0px; width: 2560px; height: 466px; overflow: hidden; position: relative;"><div class="slick-header ui-state-default" style="overflow: hidden; position: relative;"><div class="slick-header-columns" style="left: -1000px; width: 3560px;" unselectable="on"><div title="" class="ui-state-default slick-header-column header-number slick-header-sortable" id="slickgrid_501462rank" style="width: 116px;"><span class="slick-column-name">RANK</span><span class="slick-sort-indicator"></span><div class="slick-header-menubutton slick-header-down"></div><div class="slick-resizable-handle"></div></div></div></div></div></div></div></body>
</html>

Solution

Delete float:left in the class .slick-column-name, .slick-sort-indicator

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #da1a1a;
	font-weight: normal;
	color: #454545;
}
.slick-header-column {
	background-color: #E0E0E0;
	border-right: 1px solid silver;
}
.slick-header-column.ui-state-default {
	position: relative;
	display: inline-block;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	height: 16px;
	line-height: 16px;
	margin: 0;
	padding: 4px;
	border-right: 1px solid silver;
	border-left: 0px !important;
	border-top: 0px !important;
	border-bottom: 0px !important;
	float: left;
}
.slick-header-column.header-number {
	text-align: center;
}
.slickgrid_501462 .slick-header-column {
	left: 1000px;
}
.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
	position: relative;
	white-space: nowrap;
	cursor: default;
	overflow: hidden;
}
.slick-header-columns {
	background-color: #E0E0E0;
	border-bottom: 1px solid silver;
}
.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
	width: 100%;
	overflow: hidden;
	border-left: 0px !important;
}
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.content-section {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.main {
	height: 100%;
	width: 100%;
	position: fixed;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
body {
	font-family: sans-serif, "Lato", Calibri, Arial;
	font-size: 0.8em;
}
html body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.slick-sort-indicator {
	display: inline-block;
	width: 8px;
	height: 5px;
	margin-left: 4px;
	margin-top: 6px;
	float: left;
}
.slick-column-name, .slick-sort-indicator {
	display: inline-block;
	margin-bottom: 100px;
}
.slick-column-name, .slick-sort-indicator {
	margin-bottom: 0px;
}
.slick-header-menubutton {
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 12px;
	cursor: pointer;
	padding-left: 2px;
	display: none;
	border-left: thin ridge silver;
}
.slick-header-down::after {
	font-family: FontAwesome;
	content: "\f0d7";
	font-weight: 900;
	color: black;
}
.slick-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	cursor: col-resize;
	width: 4px;
	right: 0px;
	top: 0px;
	height: 100%;
}

<!DOCTYPE html>
<html class="k-ie k-ie11">
<head>
<title></title>

</head>
<body><div class="main"><div class="content-section" id="content-section"><div class="slickgrid_501462 ui-widget" id="ScClaCategoryGrid" style="outline: 0px; width: 2560px; height: 466px; overflow: hidden; position: relative;"><div class="slick-header ui-state-default" style="overflow: hidden; position: relative;"><div class="slick-header-columns" style="left: -1000px; width: 3560px;" unselectable="on"><div title="" class="ui-state-default slick-header-column header-number slick-header-sortable" id="slickgrid_501462rank" style="width: 116px;"><span class="slick-column-name">RANK</span><span class="slick-sort-indicator"></span><div class="slick-header-menubutton slick-header-down"></div><div class="slick-resizable-handle"></div></div></div></div></div></div></div></body>
</html>