# Getting a button to always be centered above a dropdown menu **URL:** \ **Category:** Dash Python\ **Created:** [August 13, 2019, 2:07pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212 "2019-08-13T14:07:47Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![waly01](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@waly01](https://community.plotly.com/u/waly01)\ **Post date:** [August 13, 2019, 2:07pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/1 "2019-08-13T14:07:47Z")
Hi, I have a problem which I feel should be relatively simple but I can’t seem to figure it out. I’m trying to get a button to be centrally aligned above ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/38405e2490838912681114e9b88eb15130369805.png) I have them in their own html.Div. I was thinking it’s probably changing the horizontalAlign in the style dict but it doesn’t seem to have any effect on it. The only way I seem to get it to move is by putting it its own Div and changing the margin left but that messes up if the page is not full screen. Any suggestions would be greatly appreciated. Here is my code: ``` html.Div([ html.Button('Refresh', id='refresh_button'), dcc.Dropdown(id='start_date_dropdown', placeholder='Choose Start Date Override', style={'width': '220px', 'font-size': '90%', 'height': '40px', } ) ], style={'margin-left': '550px', 'margin-bottom': '10px', 'verticalAlign': 'middle'} ``` ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 13, 2019, 6:59pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/2 "2019-08-13T18:59:52Z")
The simplest way: ```auto ... html.Button('Refresh', id='refresh_button',style=dict(width='220px)) ... ``` I _highly_ recommend looking at dash-bootstrap-components [https://dash-bootstrap-components.opensource.faculty.ai/l/components/button](https://dash-bootstrap-components.opensource.faculty.ai/l/components/button). This allows you to do: ```auto import dash_bootstrap_components as dbc ... dbc.Button('Refresh',id='refresh_button',block=True) ... ``` which automatically expands the button to the full width of the container. ---
**Author:** ![waly01](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@waly01](https://community.plotly.com/u/waly01)\ **Post date:** [August 13, 2019, 7:05pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/3 "2019-08-13T19:05:47Z")
I dont want it to be the same size as the dropdown. I was hoping to keep it the same size but instead of have it be aligned with the left side of the dropdown. I’d like it centered over the dropdown? I’ll def take a look at the bootstrap components as well ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 13, 2019, 7:18pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/4 "2019-08-13T19:18:32Z")
Oh, sorry - this is hard when using explicit margins because you have to perfectly balance. You can use something like: ```auto app.layout = html.Div([ html.Div([ html.Button('Refresh', id='refresh_button', ), dcc.Dropdown(id='start_date_dropdown', placeholder='Choose Start Date Override', style={'font-size': '90%', 'height': '40px', } ) ], style={'margin-bottom': '10px', 'textAlign':'center', 'width': '220px', 'margin':'auto'} ) ]) ``` where the width is set in the containing `Div`, the `textAlign` is `'center'`, and `margin` is `'auto'` to center them both. But I highly recommend using the bootstrap layout with auto-centering rows, cols, etc. as defined in dash-bootstrap-components; it takes all the guesswork and explicitness out of making the layouts. ---
**Author:** ![waly01](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@waly01](https://community.plotly.com/u/waly01)\ **Post date:** [August 13, 2019, 7:33pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/5 "2019-08-13T19:33:05Z")
wow that did the trick perfectly. well done sir. I’ve not come across bootstrap components before. It looks like they’re just more user friendly versions of the traditional dash components? ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 13, 2019, 7:46pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/6 "2019-08-13T19:46:12Z")
Kind of - but there is a lot of extended functionality as well and they work beautifully with other dash-bootstrap-components. I use them almost exclusively. ---
**Author:** ![waly01](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@waly01](https://community.plotly.com/u/waly01)\ **Post date:** [August 13, 2019, 7:47pm UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/7 "2019-08-13T19:47:55Z")
I just tried the dbc for my button but the style wont change to anything but that old windows. Is that just a function of my windows setting/browser? ```auto html.Div([ dbc.Button('Refresh', id='refresh_button', n_clicks=0, size='sm', outline=True, color='primary') ``` still looks like this: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/50dea953f2821920ab564a95207233b3eedd0842.png) ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 14, 2019, 1:03am UTC](https://community.plotly.com/t/getting-a-button-to-always-be-centered-above-a-dropdown-menu/27212/8 "2019-08-14T01:03:05Z")
Make sure your app includes a reference to the CSS theme: ```auto app = dash.Dash( __name__ , external_stylesheets=[dbc.themes.BOOTSTRAP] ) ``` More docs: [https://dash-bootstrap-components.opensource.faculty.ai/](https://dash-bootstrap-components.opensource.faculty.ai/)