placing everything in center of app messes up `DatePickerSingle` and `RadioItems`

问题

I am building a dash app, which as DatePickerSingle and RadioItems. I've placed everything in center to make it look like it's on mobile phone.
Here's my css to center everything in my app:

html * {
    width: 100%; max-width: 500px; margin: auto;
}

As you can see in the below image, two days from every week are not being displayed and arrows that take the user to next/previous month are shifted.
Here's my CSS for DatePickerSingle:

.DateInput{
    margin: 0;
    padding: 0;
    background: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.DayPicker {
    text-align: center;
}

.DayPicker_transitionContainer {
    position: relative;
    overflow: None;
    border-radius: 3px;
}

Here's how my RadioItems look like after centering:
--no css for RadioItems --
But, I've tried to fix it by doing this:

import dash_core_components as dash_core
dash_core.RadioItems(id="gender_input",
                     options=[
                              {'label': 'Male', 'value': 'male'},
                              {'label': 'Female', 'value': 'female'}
                             ],
                             style={"align": "left"})

These problems arise only when I center everything. Apparently, I'm not good in css and besides the css I provided above, everything is under default styling.

Please help me solve these.

EDIT 2(after coralvanda's answer):
I've removed my css of *html and put what you've suggested in my code after children and this is how it looks now:
Now, twoDivs and a Hr before the text are still not being displayed(see the scroll bar).

EDIT 3(after suggestion for seperate Divs):
This is how it looks now:
The code is:

app.layout = dash_html.Div(children=[
    # radio button with no centering
    dash_html.H4("Do you take anti-hypertensive medication"),
    dash_core.RadioItems(className='Radio-button',
                         id="hypertensive_input",
                         options=[
                             {'label': 'Yes', 'value': 'yes'},
                             {'label': 'No', 'value': 'no'}
                         ]),

    # radio button with centering
    # text appears after the radio inputs, when it should be o
    dash_html.Div(children=[
        dash_html.H4("Do you take anti-hyperlipedemic medication"),
        dash_core.RadioItems(className='Radio-button',
                             id="hyperlipedmic_input",
                             options=[
                                 {'label': 'Yes', 'value': 'yes'},
                                 {'label': 'No', 'value': 'no'}
                             ])
    ], style=dict(display='flex', justifyContent='center')),

    # an input form with no styling
    dash_html.H4("Enter your Insulin"),
    dash_core.Input(className="input-form", id="insulin_input", placeholder='e.g.: 19.3, 25, 38.2', type='number')
])

回答1:

Yes, Dash components can do funny things with CSS. It's probably best to enclose them in div components, and then center each div. My favorite tool for this is flexbox.

The code might look something like this:

html.Div(children=[
    # your component here
], style=dict(display='flex', justifyContent='center')

Make sure to remove the html * from your CSS, because that will trickle down into everything. If you still have trouble, post and update and I'll try to help more.

Edit: It looks from your edit like you may have this structure

html.Div(children=[
    # component 1
    # component 2
    # component 3
    # etc.
], style=dict(display='flex', justifyContent='center')

Try this structure instead:

html.Div(children=[
    html.Div(children=[
        # component 1 here
    ], style=dict(display='flex', justifyContent='center'),

    html.Div(children=[
        # component 2 here
    ], style=dict(display='flex', justifyContent='center'),

    html.Div(children=[
        # component 3 here
    ], style=dict(display='flex', justifyContent='center'),
])

Edit: I tried using your latest code, which you've displayed showing the text appearing after the radio buttons. When I inspect in the browser, they are all centered on the same line. The H4 has large top and bottom margins, and the radio buttons don't. That makes them appear at different heights. You can either remove the margins from the H4 with something like style=dict(marginTop=0, marginBottom=0), or you could set a margin on the radio buttons with something like style=dict(marginTop=20). When I do either of those, everything looks properly aligned in the center.

来源：https://stackoverflow.com/questions/58076801/placing-everything-in-center-of-app-messes-up-datepickersingle-and-radioitems

标签

python

python-3.x

plotly-dash