如何在 R Shiny 中对齐图像旁边的一些文本？答案

【问题标题】：How can I align some text next to an image in Rshiny?如何在 R Shiny 中对齐图像旁边的一些文本？
【发布时间】：2022-08-15 23:49:52
【问题描述】：

对于我的 R 闪亮仪表板，我想添加一些关于团队成员的信息。在这里，我想展示每个团队成员的照片，然后在图像中添加一些信息。我不能让这个工作。

我现在拥有的：

  tabPanel(\'Team & Contact\', 
           tags$div(
              tags$h1(\'Project team\')
             , tags$img(src = \'Man_1_rood.jpg\', style = \'border-radius: 50%\', width = \'100px\')
             , tags$br(), h6(\'Person 1\')
             , h6(\'Senior Scientist\')
             , h6(\'Some very interesting text about person 1.\')
             , tags$br()
             , tags$img(src = \'Man_1_rood.jpg\', style = \'border-radius: 50%\', width = \'100px\')
             , h6(\'Person 2\')
             , h6(\'Researcher\')
             , h6(\'Some very interesting text about person 2.\')
             , tags$br()
             , tags$img(src = \'Man_1_rood.jpg\', style = \'border-radius: 50%\', width = \'100px\')
             , tags$br(), h6(\'Person 3\')
             , h6(\'Data Scientist\')
             , h6(\'Some very interesting text about person 3.\')
           )
  ))


server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

这导致： Output now

但我想要的是这样的： --> 左边的图片和右边的文字，而不是在彼此下方 --> 图像在所有文本中间对齐

Desired output

标签： r shiny

【解决方案1】：

这是一个CSS解决方案。

tabPanel('Team & Contact', 
         tags$style("#project-grid {
                      display: grid;
                      grid-template-columns: 100px 1fr;
                      grid-gap: 10px;
                      }"),
         h1('Project team'),
         div(id = "project-grid",
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 1'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 1. Some very interesting text about person 1. Some very interesting text about person 1. Some very interesting text about person 1.')),
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 2'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 2')),
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 3'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 3. Some very interesting text about person 3.'))
         )

【讨论】：