css - 为什么这个 html div 元素没有居中?
问题描述
我想在蓝色背景块中将顶部下拉居中:
我尝试了很多不同的方法,包括遵循本指南: https ://www.w3schools.com/howto/howto_css_image_center.asp 。我也尝试过添加一个 float:center 参数,但我一辈子都无法让它发挥作用。
这是我编写的代码的相关部分:(我想将“#下拉菜单的第一行”部分下的元素居中)
html.Div([
# First row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="court_dd_0",
options=[
{'label': i, 'value': i} for i in sorted(list(crest['court_name'].unique()))
],
value = 'Aylesbury Crown Court',
#placeholder='[Placeholder] John Doe',
),
], style={'width': '50%',
'display': 'block',
'margin-left': 'auto',
'margin-right': 'auto',
'textAlign': 'center'}, className='six columns'),
], className='row'),
# Second row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="offence_group_dd_2",
options=[
{'label': i, 'value': i} for i in sorted(list(df_gb_offences.offence_ho_group_desc_mso.unique()))
],
value = None,
placeholder='Select breakdown by offence group',
),
], style={'padding': 10}, className="six columns"),
html.Div([
dcc.Dropdown(
id="offence_code_dd_3",
options=[
{'label': i, 'value': i} for i in sorted(list(crest.offence_ho_code_desc_mso.unique()))
],
#value = None,
placeholder='Select breakdown by offence',
),
], style={'padding': 10}, className="six columns"),
], className='row'),
# Third row of the dropdown menus
html.Div([
html.Div([
dcc.Slider(
id='year_slider_0',
min=crest['year'].min(),
max=crest['year'].max(),
value=crest['year'].max(),
marks={str(year): str(year) for year in crest['year'].unique()}
),
], className="twelve columns"),
], style={'padding': 10}, className='row'),
# End of third row of the drop down menus
], style={
'textAlign': 'center',
'margin':25,
'backgroundColor': colors['background'],
'width': '95%',
'height': '100%',
'display': 'inline-block',
'padding': 10
}),
解决方案
看起来您指定 offence_group_dd_2 在行中占据 6 列,这正是它似乎正在做的事情。尝试删除“六列”类名。
推荐阅读
- java - 用于从 xml-schema 到 java 的 unicode 中拉丁脚本子集的 RegEx
- ios - 更改 Google 地图标记插图 iOS
- javascript - 在 CKEditor5 中插入带有类和 id 的跨度在粘贴时会产生错误
- parameters - Modelica 中参数的 FMU 输入
- python - 如何检查和比较元组项
- android - FCM 服务器如何识别网络上的目标设备?
- python - 使用 Flask 显示 matplotlib 图
- javascript - 如何将模板提取到外部文件
- python - 日出的Python星体计算,两个不同的时间相同的日期
- python-asyncio - ConnectionResetError('连接丢失')python异步服务器