我如何在dash bootstrap中对齐jumbotron中的徽标标题和段落

Posted 2023-03-05

【中文标题】我如何在dash bootstrap中对齐jumbotron中的徽标标题和段落

【英文标题】：how do i align logo Header and Paragraph in jumbotron in dash bootstrap

【发布时间】：2021-09-23 03:09:20

【问题描述】：

我在 python 中使用 Dash，我试图在 jumbotron 中将徽标标题和段落对齐在同一水平面上，但这对我不起作用。我得到这样的东西。

但我想让它看起来像下图

我正在使用这些外部样式表

external_stylesheets = [dbc.themes.BOOTSTRAP,'https://codepen.io/chriddyp/pen/bWLwgP.css']

这是我尝试实现的布局的代码

html.A(
            
            dbc.Jumbotron(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,'.format(encoded_image.decode()),style='height':'100px',
                                                                                                  'align':'center')),

                    dbc.Col( html.H1(children='header',
                      style=
                          'text-align':'center',
                          'color':'white'
                      
                      )),
                        dbc.Col(html.P(children='version',
                           style=
                               'text-align':'right',
                                'color':'white'
                           )),
                ],
                style=
                    'height':'auto',
                    'width':'auto',
                    'background-color':'#0067b9',
                
    ),
    )

任何帮助都会对我有很大帮助谢谢。

代码的最新变化：

html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Jumbotron(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,'.format(encoded_image.decode()),style='height':'100px',
                                                                                                  'width':'15%',
                                                                                                  'align':'left')),

                    dbc.Col( html.H1(children='Header',
                      style=
                          'text-align':'center',
                          'color':'white'
                      
                      )),
                        dbc.Col(html.H6(children='version',
                           style=
                               'text-align':'right',
                                'color':'white'
                           )),
                ],
                style=
                    'height':'auto',
                    'width':'auto',
                    'text-align':'left',
                    'background-color':'#0067b9',
                    'align-items': 'center'
                
    ),
    )

这是结果

添加display:flex后

【问题讨论】：

通过将align-items: center 提供给父级来使用flexbox。

感谢您的回复，我试过这种方式，但还是一样没有变化。

能否附上应用样式后的dom截图

请检查我在那里更新的问题。

除了align-items: center之外，还尝试将display: flex添加到父级

【参考方案1】：

html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,'.format(encoded_image.decode()),style='height':'100px',
                                                                                                  'width':'15%',
                                                                                                  'align':'left')),

                    dbc.Col( html.H1(children='Header',
                      style=
                          'text-align':'center',
                          'color':'white'
                      
                      )),
                        dbc.Col(html.H6(children='version',
                           style=
                               'text-align':'right',
                                'color':'white'
                           )),
                ],
                style=
                    'height':'auto',
                    'width':'auto',
                    'text-align':'left',
                    'background-color':'#0067b9',
                    'align-items': 'center'
                
    ),
    )