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

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"))
    )
  ),

发生的情况是，图像确实被放置在右侧，但它被放置在右下角，而我需要它与标题在同一行。

我尝试以像素为单位调整列的高度，但在一定高度以下，它不再改变。上面的图片显示了极限。

有什么建议吗？

附注：我不想将它们都分组到wellpanel中，除非我可以使它完全变白并因此变得不可见。

- Tingolfin

Answer 1

在尝试在wellPanel中解决同样的问题时，我自己想出了解决方法。

罪魁祸首是column()中的offset参数。如果我将其删除，则图像和标题水平对齐。

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

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

- Tingolfin

Answer 2

如何考虑：

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

pull-right类是Bootstrap的一个类，看起来可以实现您想要的效果。

- Bárbara Borges

---

它确实将图像移动到我想要的位置，但现在它不再考虑标题面板。它重叠了标题面板和下一个井面板... - Tingolfin

Answer 3

根据column文档，offset参数是指“此列距离上一列结尾的列数偏移量”。第一列占用12个单位中的4个单位。然后在上一列结束位置向右8个单位添加一列，这意味着您在12个单位中使用了4+8 = 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"))
    )
  )

- Doctor G