在 wellpanel R Shiny 中水平对齐文本和图像

Question

我在 Shiny 中构建了一个带有图像和文本块的 wellpanel。我将它们放在单独的列中，并希望它们彼此相邻。 Shiny 不这么认为，拒绝让他们结盟。文本似乎与图像位于不同的行，我不明白为什么会这样。

ui <- fluidPage(
  wellPanel(
    fluidRow( 
      column(3, img(height = 105, width = 300, 
                    src = "logo_pcfruit.jpg")),
      column(9, offset = 3,
        p("De perenbladvlo vormt één van de voornaamste perenplagen in Europa. 
        Perenbladvlooien voeden zich met plantensap dat ze uit bladknoppen en jonge scheuten zuigen. 
        Deze zuigactiviteit leidt tot directe schade aan perenbomen onder de vorm van bladmisvorming en groeiremming. 
        Het teveel aan suikers dat ze uit het plantensap opnemen, scheiden perenbladvlooien -net als bladluizen- uit als honingdauw. 
        "),
        p("Perenbladvlooien overwinteren als adult en leggen vroeg in het jaar een eerste generatie eitjes. 
        De uitgekomen larven doorlopen 5 stadia alvorens ze een laatste keer vervellen tot adult en op hun beurt eitjes leggen. 
        "), 
      )
    )
  )
)

（抱歉输入的文字太大，否则布局不太清晰。）

我对 CSS 和 HTML 没有任何经验，所以 Shiny 解决方案会很好。如果那不可能，CSS 或 HTML 也可以。

我上周发布了一个关于 titelpanel 的类似问题。我现在认为这两种情况都是由同一个问题引起的，但是哪个？

Answer 1

我自己想通了：问题出在column()中的offset参数。没有它，图像和文本会很好地对齐。 titlePanel 问题的相同答案。

ui <- fluidPage(
  wellPanel(
    fluidRow( 
      column(3, img(height = 105, width = 300, src = "logo_pcfruit.jpg")),
      column(9,
        p("De perenbladvlo vormt één van de voornaamste perenplagen in Europa. 
        Perenbladvlooien voeden zich met plantensap dat ze uit bladknoppen en jonge scheuten zuigen. 
        Deze zuigactiviteit leidt tot directe schade aan perenbomen onder de vorm van bladmisvorming en groeiremming. 
        Het teveel aan suikers dat ze uit het plantensap opnemen, scheiden perenbladvlooien -net als bladluizen- uit als honingdauw. 
        "),
        p("Perenbladvlooien overwinteren als adult en leggen vroeg in het jaar een eerste generatie eitjes. 
        De uitgekomen larven doorlopen 5 stadia alvorens ze een laatste keer vervellen tot adult en op hun beurt eitjes leggen. 
        "), 
      )
    )
  )
)

（编辑：我在此屏幕截图中使用了与问题中不同的图像，不同的框大小不是缺陷）

在 wellpanel R Shiny 中水平对齐文本和图像

Align text and image horizontally in wellpanel R Shiny

r

panel

shiny