将所有内容放在应用程序的中心会弄乱“DatePickerSingle”和“RadioItems”

Question

我正在构建一个仪表板应用程序，它是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 并将您建议的内容放在孩子之后的代码中，这就是现在的样子：
现在，仍然没有显示文本之前的两个Divs 和一个Hr（请参阅滚动条）。

编辑 3（建议单独 Divs）：
这就是现在的样子：
代码是：

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=dict(marginTop=20) 之类的东西在单选按钮上设置边距。当我执行其中任何一项操作时，一切看起来都在中心正确对齐。