# Dash datatables inline block not centered **URL:** \ **Category:** Dash Python\ **Created:** [May 7, 2022, 8:52am UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830 "2022-05-07T08:52:42Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [May 7, 2022, 8:52am UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/1 "2022-05-07T08:52:42Z")
Hello everyone, my target is to align center & inline block 2 datatables. (side by side and centered) this is my code: a parent div with 2 div inside, each table in its own div. app.layout = html.Div([ ``` html.Div(dashtable1, style = {'width': 'auto', 'display':'inline-block', 'align-items':'center', #'justify-content':'center', 'horizontal-align':'middle', 'marginLeft': '20px', 'marginRight': '5px' , 'marginTop': 'auto', 'marginBottom': '20px', 'color': 'white' }), html.Div(dashtable2, style = {'width': 'auto', 'display': 'inline-block', 'align-items':'center', #'justify-content':'center', 'horizontal-align':'middle', 'marginLeft': '5px', 'marginRight': '5px' , 'marginTop': 'auto', 'marginBottom': '20px', 'color': 'white' }), ] ) ``` the result is on the picture. i have tried all properties i could find online, justify-content, horizontal-align, align-items , display:flex etc… Any comments appreciated. ![dash not center](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/7/37cae74c29f069618d656288e21e6ce0af0dfd52.png) ---
**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\ **Post date:** [May 9, 2022, 3:14pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/2 "2022-05-09T15:14:43Z")
hi @Bambos , Welcome to the community and than you for your question. I’m not 100% clear on how you want to align things in the dataTable. Can you share a final image or drawing of how you would like the layout to look like? I also saw that you got a [reply to your question here](https://community.plotly.com/t/putting-two-dash-table-side-by-side/50953/10). Did that not work? ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [May 9, 2022, 8:16pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/3 "2022-05-09T20:16:41Z")
Hello @adamschroeder , yes and no, doing manipulation with margins it might work on a certain browser size, but not working ok when resizing the browser window. my target is to have tables as “inline block” , with some space between them (margin) and all the row to be centered. like this : ![dash-target-layout](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/5/45847f38df7dcba4c67fd559dadafe2731433b24.png) thanks for any suggestions. ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [May 10, 2022, 6:02am UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/4 "2022-05-10T06:02:25Z")
Also i have similar issue with html.H4 in html.Div. Target is to have in the same line 2X html.H4 objects, aligned left with some margin and align right with some margin, letting the space be in the middle. I thought using a main Div, with the objects in a separate Div would give more flexibility (because of different style dictionary to each object) but seems again something is wrong. code like this: return html.Div([ ``` html.Div([html.H4('DSO Scada Web Interface')], style={'textAlign': 'left', #'width':'140%', 'margin-right':'50px', 'margin-left':'50px', 'display':'inline-block'} ), html.Div([html.H4(a)], style={'textAlign': 'right', 'margin-right':'50px', 'margin-left':'50px', 'display':'inline-block'}) ] , style={'display':'inline-block', 'textAlign': 'center', 'align-items':'center', 'justify-content':'center', }) ``` Appearance target is like that: Blue positions, same line, aligned left with a margin and right with a margin. ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/8/e81ae671f681cd9237bb0f0084b48b4c8d531928.png) ---
**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\ **Post date:** [May 10, 2022, 2:33pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/5 "2022-05-10T14:33:16Z")
Hi @Bambos Regarding the H4 alignment, I think this should work for you: ```auto from dash import Dash, dcc, html import dash_bootstrap_components as dbc app = Dash( __name__ , external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = dbc.Container([ dbc.Row([ dbc.Col([html.H4("DSO Scada Web Interface")], width=6), dbc.Col([html.H4("DSO Scada Web Interface", style={'textAlign': 'right'})], width=6), ], justify="around") ]) if __name__ == ' __main__': app.run_server(debug=True) ``` ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/3/c3d0c366502a598824705421140ca7370dfded28.png) ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [June 12, 2022, 2:47pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/6 "2022-06-12T14:47:49Z")
@adamschroeder it’s been very nice week getting familiar with bootstrap component. Thank you. it feels more controllable layout in comparison to the plain html.Div container. do you have a suggestion on how to make smaller text in a dbc.input text box ? i check all documentation, i couldn’t find any of this kind of property. I’m trying to fit an IP address inside a column (this block is on a parent column) ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/a/baf97821b40bedb616b3976d5b0f2bf3a7ada855.png) ---
**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\ **Post date:** [June 13, 2022, 2:07pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/7 "2022-06-13T14:07:20Z")
hi @Bambos That’s a good question. I’m not sure but if you share a minimum working example (code), I can try playing around with it and see if I can find a way. ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [June 13, 2022, 3:21pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/8 "2022-06-13T15:21:50Z")
Hello Mr. Adam, This is the absolute smaller amount of code i could do, as the example layout is 3 parent columns with row and 4 subcolumns in each parent column. Objective is to fit a normal IP address with 3 digits address in the input text box. I saw the property size=‘small’ without any impact. thank you for your effort. ```auto import dash import dash_bootstrap_components as dbc from dash import html app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) app.title='Modbus Commander V1' app.layout = dbc.Container([ html.Br(), dbc.Row([ dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.0.0.1', type="text", size='small' )), dbc.Col(dbc.Input(value=1000, placeholder="address", type="number")), dbc.Col(dbc.Input(value=256, placeholder="value", type="number")) , dbc.Col(dbc.Button('write')) ])), dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.000.000.001', type="text", size='small' )), dbc.Col(dbc.Input(value=1001, placeholder="address", type="number")), dbc.Col(dbc.Input(value=257, placeholder="value", type="number")) , dbc.Col(dbc.Button('write')) ])), dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.0.0.1', type="text", size='small' )), dbc.Col(dbc.Input(value=1002, placeholder="address", type="number")), dbc.Col(dbc.Input(value=258, placeholder="value", type="number")) , dbc.Col(dbc.Button('write')) ])), ]) ]) if __name__ == ' __main__': app.run_server(port=80, debug=True , host='0.0.0.0') ``` ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/c/9cd5b3216c6abace3505e695b876fbc2d7997103.png) ---
**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\ **Post date:** [June 15, 2022, 9:18am UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/9 "2022-06-15T09:18:54Z")
Hey @Bambos Note first of all that `size="small"` has no effect, it should be `size="sm"`, however in this case the size of the input box itself is decreased which is i think not what you want. You can set the font size using the `style` argument, but note that the font size also influences the height of the input box, so you must also set the line height to compensate. By default the font size is 1rem and the line height is 1. If you multiply the font size by x, you must multiply the line height by 1 / x to compensate. E.g. if you halve the font size, double the line height. ```python style={"fontSize": "0.4rem", "lineHeight": 3.75} ``` ^this combination made your long IP fit in the box for me, but in my opinion it doesn’t look great, and I think fundamentally there just isn’t enough horizontal space in your current layout. I would suggest reorganising your content, perhaps into three rows where each row has a bit more horizontal space to fit everything in ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/5/652f51d2cef9593801afdc644d136b437bf41ada.jpeg) ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [June 30, 2022, 5:15am UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/10 "2022-06-30T05:15:11Z")
@tcbegley yes, that’s the idea. Thank you very much for the input. ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [January 8, 2023, 1:24pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/11 "2023-01-08T13:24:30Z")
@tcbegley Hello Mr. Tom, happy new year, i hope all is good. i’m working only with dbc components lately, and i realize that without the external stylesheet is not working correctly on positioning the html content. app = dash.Dash(external\_stylesheets=[dbc.themes.BOOTSTRAP]) can you confirm and explain this please ? ---
**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\ **Post date:** [January 8, 2023, 4:42pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/12 "2023-01-08T16:42:33Z")
Bootstrap is styled with CSS, so that CSS needs to be linked in your app. The CSS is not bundled automatically because there are many variants and themes for Bootstrap, so we give the user the choice to link whichever one they want. Check out @AnnMarieW’s theme explorer to see some of the variety of styles you can achieve by linking different stylesheets: [https://hellodash.pythonanywhere.com/](https://hellodash.pythonanywhere.com/) ---
**Author:** ![Bambos](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@Bambos](https://community.plotly.com/u/Bambos)\ **Post date:** [January 8, 2023, 7:06pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/13 "2023-01-08T19:06:08Z")
Thanks ! i will check out those. Something that is not clear from documentation, html.Div is it the same as dbc.Container ? They look to be functioning the same. What is your suggestion ? ---
**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\ **Post date:** [January 8, 2023, 7:37pm UTC](https://community.plotly.com/t/dash-datatables-inline-block-not-centered/63830/14 "2023-01-08T19:37:03Z")
A container is a div with certain CSS classes applied that add spacing and assist with layout. If you’re seeing no difference between that and a div it might be that the stylesheet hasn’t been linked correctly