python - 将所有内容放在应用程序中心会弄乱 `DatePickerSingle` 和 `RadioItems`

Question

我正在构建一个 dash 应用程序，作为 DatePickerSingle 和 RadioItems。我把所有东西都放在了中间，让它看起来像是在手机上。
这是我的 CSS，用于将我的应用程序中的所有内容居中:

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

正如您在下图中所见，每周有两天没有显示，将用户带到下一个月/上一个月的箭头发生了偏移。
这是我的 DatePickerSingle CSS:

.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;
}

这是居中后我的 RadioItems 的样子:
--RadioItems 没有 css --
但是，我试图通过这样做来修复它:

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"})

这些问题只有在我将所有内容都居中时才会出现。显然，我不擅长 css，除了我上面提供的 css 之外，所有内容都采用默认样式。

请帮我解决这些问题。

编辑 2(在 coralvanda 的回答之后):
我已经删除了 *html 的 css，并将您在我的代码中的建议放在 children 之后，这就是现在的样子:
现在，文本前面的两个Div和一个Hr仍然没有显示(看滚动条)。

编辑 3(在建议单独的 Div 之后):
这是现在的样子:
代码是:

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')
])

Answer 1

是的，Dash 组件可以用 CSS 做一些有趣的事情。最好将它们包含在 div 组件中，然后将每个 div 居中。我最喜欢的工具是 flexbox .

代码可能是这样的:

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

确保从您的 CSS 中删除 html *，因为它会渗透到所有内容中。如果您仍有问题，请发帖和更新，我会尽力提供更多帮助。

编辑: 从您的编辑看起来您可能具有这种结构

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

试试这个结构:

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'),
])

编辑: 我尝试使用您的最新代码，您显示的代码显示了单选按钮后出现的文本。当我在浏览器中检查时，它们都集中在同一条线上。 H4 有很大的顶部和底部边距，而单选按钮则没有。这使它们出现在不同的高度。您可以使用类似 style=dict(marginTop=0, marginBottom=0) 的方式从 H4 中移除边距，或者您可以使用类似 style= 的方式在单选按钮上设置边距字典(marginTop=20)。当我执行其中任一操作时，一切看起来都正确地居中对齐。