闪亮的标题面板：如何将标题和图像放在同一高度？

Question

我想在标题面板中同时使用标题和图像，但左侧是标题，右侧是图像。 我使用以下代码在面板中获得了它们：

ui <- fluidPage(
   titlePanel(div("Fenologische modellen", 
                   img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
   ),

然而他们只是紧挨着彼此。 因为对齐不适用于图像（或＆＃34; style = ...＆＃34;，也尝试过），我决定将它们放在不同的列中，这需要首先使用fluidRow。

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 8, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  ),

图片确实放在右边，但它被放在右下方，而我需要它与标题位于同一行。

我已尝试以像素为单位调整列的高度，但在一定高度下，它不再发生变化。上图显示了限制。

有什么建议吗？

PS：我不想把它们都放在一个wellpanel中，除非我能把它完全变成白色，因此看不见。

Answer 1

所以我在试图解决wellPanel中的相同问题时想出了自己。 坏人是offset中的column()参数。如果我将其删除，图像和标题将水平对齐。

要将图像放在右边，我只需要使左列非常宽：

titlePanel(
  fluidRow(
    column(9, "Fenologische modellen"), 
    column(3, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
  )
),

Answer 2

怎么样：

titlePanel(div("Fenologische modellen", 
                img(height = 105, width = 300, 
                    src = "logo_pcfruit.jpg", 
                    class = "pull-right")))

pull-right类是一个似乎可以做你想做的Bootstrap类。

Answer 3

根据column的文档，offset参数为

“要从上一列末尾偏移此列的列数。”

您的第一列占12的4个单位，然后在最后一列的末尾相隔8个单位的位置添加一列，这意味着您要在12 + 4 = 8之后开始新列。 4个单位+ 4个偏移量+ 4个单位= 12个单位，offset参数的正确使用将是

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 4, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  )