如何增大Shiny App中自定义条带的尺寸并让指定标题居中显示

修改说明 #

你需要调整自定义条带的布局结构和样式属性，核心修改点如下：

• 移除绿色条带原有的固定高度height:80px限制，改为通过内边距控制区域高度，同时新增样式属性实现标题在条带范围内垂直+水平居中
• 将水平线hr和下方说明文本移至绿色条带外部，保证绿色条带的覆盖范围刚好到水平线位置
• 调整标题的默认外边距，避免布局偏移

修改后完整代码 #

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 # 绿色自定义条带区域
                                 div(
                                   style = "background-color: #02BE7F; width: 100%; padding: 40px 0;",
                                   h2(HTML("Project <b>Description</b>"), 
                                      style="text-align:center;color: white;margin:0;")
                                 ),
                                 # 水平线和下方内容移到条带外
                                 hr(),
                                 div(
                                   style = "width: 70%; margin: auto;",
                                   h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"), 
                                      style="text-align:justify"))
                                 
                        ))

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

shinyApp(ui = ui, server = server)

如果需要调整绿色条带的高度，直接修改padding: 40px 0里的40px即可，数值越大条带越高。

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