\
**Category:** Dash Python\
**Created:** [August 2, 2018, 3:28pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337 "2018-08-02T15:28:12Z")\
**Posts on this page:** 11\
**Page:** 1
**Author:**  [@renanxcortes](https://community.plotly.com/u/renanxcortes)\
**Post date:** [August 2, 2018, 3:28pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/1 "2018-08-02T15:28:12Z")
Hello,
I know that this might be a simple question, but is there a way to centralize a dcc.Slider in a Dash app?
I tried this but it’s not working:
```
html.Div([
dcc.Slider(
id='years-slider',
min=min(years),
max=max(years),
value=min(years),
marks={str(year): str(year) for year in years_by_step},
)
], style={'width':'75%', 'margin':25, 'textAlign': 'center'})
```
Kind regards,
Renan
---
**Author:**  [@klnrdknt](https://community.plotly.com/u/klnrdknt)\
**Post date:** [August 3, 2018, 10:41am UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/2 "2018-08-03T10:41:58Z")
One thing you could do, using the CSS Skeleton kit is something like this, using Skeletons Grid system
```auto
html.Div(
className='row',
children=[
html.Div(className='two columns', style={'display': 'inline-block'}),
dcc.Slider( .... your code...., className='ten columns', style={'display': 'inline-block'})
]
)
```
Dont know if this works though, the Slider element is a little weird. Try using the Firefox/Chrome developer tools inspector to identify the element which you need to actually adress. You can also include a local CSS in your Dash app and then write your CSS there. It’s somewhere on the forum.
---
**Author:**  [@renanxcortes](https://community.plotly.com/u/renanxcortes)\
**Post date:** [August 3, 2018, 12:14pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/3 "2018-08-03T12:14:51Z")
> [@klnrdknt](#):
>
> className=‘row’
Thanks, but I didn’t work. Actually dss.Slider doesn’t support a ‘style’ argument.
---
**Author:**  [@klnrdknt](https://community.plotly.com/u/klnrdknt)\
**Post date:** [August 3, 2018, 12:49pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/4 "2018-08-03T12:49:21Z")
Theeen, wrap it in another div, make it 100%? 😃
---
**Author:**  [@klnrdknt](https://community.plotly.com/u/klnrdknt)\
**Post date:** [August 3, 2018, 12:55pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/5 "2018-08-03T12:55:27Z")
In general, I guess it would be nice to give the Slider component a few more attributes to handle this kind of stuff more easily. CSS styling is tedious with it in general…
---
**Author:**  [@renanxcortes](https://community.plotly.com/u/renanxcortes)\
**Post date:** [August 3, 2018, 1:07pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/6 "2018-08-03T13:07:32Z")
> [@klnrdknt](#):
>
> give the Slider component a few more attributes to handle this kind of stuff more easily. CSS styling is tedious with it
Yes… I agree with you… I wrapped into another div as you suggested, but I didn’t work again. Thank you very much! However, right now, my team are leaving Dash for a moment to develop the web app using raw plotly.js. I hope Dash will improve with time with proper documentation and more flexibility of the components, specially in terms of UI.
Best.
---
**Author:**  [@David22](https://community.plotly.com/u/David22)\
**Post date:** [April 18, 2019, 2:31pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/7 "2019-04-18T14:31:42Z")
Hello, I know this issue is quite old but I had the same one and found a way to fix it:
1. include the dcc.RangeSlider in a div
2. give some style attributes, namely the width, and the padding-left and padding.right, as relative values. For instance:
html.Div(children=[
dcc.RangeSlider(
id=‘range-slider-1’,
min=…,
max=…,
marks=…,
], style={‘width’: ‘96%’,‘padding-left’:‘3%’, ‘padding-right’:‘1%’}),
Other properties such as margin auto, display inline, text-align center, didnt work. Padding does.
KR
---
**Author:**  [@paw\_el](https://community.plotly.com/u/paw_el)\
**Post date:** [July 25, 2019, 1:41pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/8 "2019-07-25T13:41:04Z")
Hello,
You can always centralize everything inside particular Div:
html.Div([
dcc.Slider(
id=‘years-slider’,
min=min(years),
max=max(years),
value=min(years),
marks={str(year): str(year) for year in years\_by\_step},
)
], style = {‘width’: ‘100%’, ‘display’: ‘flex’, ‘align-items’: ‘center’, ‘justify-content’: ‘center’})
---
**Author:**  [@sami999](https://community.plotly.com/u/sami999)\
**Post date:** [September 8, 2020, 10:58pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/10 "2020-09-08T22:58:56Z")
Just spent hours trying to figure this out thank you
---
**Author:**  [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [October 20, 2020, 11:25pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/11 "2020-10-20T23:25:46Z")
Thanks, I had problems to align a LEDDisplay in the center of a div and this solution works. !!
---
**Author:**  [@mzahrioui](https://community.plotly.com/u/mzahrioui)\
**Post date:** [May 13, 2022, 10:07pm UTC](https://community.plotly.com/t/center-alignment-for-html-div-dcc-slider/12337/12 "2022-05-13T22:07:14Z")
Hi, I know this is super late but just for begginners like me, there is a function ‘dash.html.Center()’, it makes miracles in this sense, you can use it with bootstrap, core or basic html components, basicly with everything I think!