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

【问题标题】：how do i align logo Header and Paragraph in jumbotron in dash bootstrap我如何在dash bootstrap中对齐jumbotron中的徽标标题和段落
【发布时间】：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添加到父级

标签： python html css bootstrap-4 plotly-dash

【解决方案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'
                }
    ),
    )

【讨论】：