如何在R Shiny仪表盘中实现图片与右侧文本的垂直居中对齐？

要实现图片居左、右侧文本垂直居中的布局，你可以用CSS Flexbox来改造代码，以下是修改后的完整实现：

ui <- fluidPage(
  tabPanel('Team & Contact', 
           tags$div(
             tags$h1('Project team'),
             # 成员1容器
             tags$div(style = "display: flex; align-items: center; margin-bottom: 30px;",
                      tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px'),
                      tags$div(style = "margin-left: 20px;",
                               h6('Person 1'),
                               h6('Senior Scientist'),
                               h6('Some very interesting text about person 1.')
                      )
             ),
             # 成员2容器
             tags$div(style = "display: flex; align-items: center; margin-bottom: 30px;",
                      tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px'),
                      tags$div(style = "margin-left: 20px;",
                               h6('Person 2'),
                               h6('Researcher'),
                               h6('Some very interesting text about person 2.')
                      )
             ),
             # 成员3容器
             tags$div(style = "display: flex; align-items: center;",
                      tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px'),
                      tags$div(style = "margin-left: 20px;",
                               h6('Person 3'),
                               h6('Data Scientist'),
                               h6('Some very interesting text about person 3.')
                      )
             )
           )
  )
)

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

shinyApp(ui = ui, server = server)

关键修改说明： #

• 给每个团队成员单独套一个div容器，设置display: flex让内部元素横向排列，align-items: center实现图片和文本垂直居中对齐
• 文本部分再嵌套一个div，并设置margin-left: 20px给图片和文本之间留出间距
• 用margin-bottom给每个成员块增加底部间距，避免内容拥挤
• 移除了原代码中的tags$br()，因为Flex布局已经能控制元素排列结构

内容的提问来源于stack exchange，提问作者waarde777