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

Question

我想要标题面板中的标题和图像，但标题在左边，图像在右边。我使用以下代码将它们都放在了面板中：

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

但他们紧挨着。因为对齐不适用于图像（或 "style = ..."，也尝试过），我决定将它们放在不同的列中，这首先需要一个 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

怎么样：

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

pull-right class 是一个 Bootstrap class 似乎可以满足您的需求。

Answer 2

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

要将图像放在右边，我只需要将左边的列加宽即可：

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

Answer 3

根据 column 的文档，offset 参数是

"The number of columns to offset this column from the end of the previous column."

您的第一列占 12 个单位中的 4 个单位。然后在距最后一列末尾 8 个单位的位置添加一列，这意味着您在 4+8 = 12 个单位中的 12 个单位后开始新列. 因为 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"))
    )
  )

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

Shiny titlepanel: how to put title and image at same height?

position

r

image

title

shiny