如何在gt表格中实现队名与本地Logo水平对齐并添加间距？

针对你遇到的队名和Logo未水平对齐、无间距的问题，可以通过HTML布局属性来修正，以下是两种可行方案：

方案一：Flexbox布局（推荐） #

利用CSS Flexbox容器实现元素水平排列+垂直居中，同时直接控制间距：

tbl <- dtf %>% 
  gt() %>% 
  gt::text_transform(
    fn = function(x){
      paste0(
        "<div style='display:flex; align-items:center; gap:15px;'>",
        "<span style='font-size:20pt;'>", x,"</span>",
        local_image(filename = paste0("~/Documents/teamlg/", x,".png"),
                    height = 40),
        "</div>"
      )
    },
    locations = cells_body(columns = team)
  )

关键属性说明：

• display:flex：将容器内元素设置为水平排列
• align-items:center：确保文本与Logo在垂直方向居中对齐
• gap:15px：设置文本和Logo之间的间距，可根据需求调整数值

方案二：Inline-block+垂直对齐 #

如果偏好传统布局方式，可通过inline-block和vertical-align实现：

tbl <- dtf %>% 
  gt() %>% 
  gt::text_transform(
    fn = function(x){
      paste0(
        "<span style='font-size:20pt; display:inline-block; vertical-align:middle; margin-right:15px;'>", x,"</span>",
        "<span style='display:inline-block; vertical-align:middle;'>",
        local_image(filename = paste0("~/Documents/teamlg/", x,".png"),
                    height = 40),
        "</span>"
      )
    },
    locations = cells_body(columns = team)
  )

关键属性说明：

• display:inline-block：让元素支持垂直对齐和外边距设置
• vertical-align:middle：使文本与Logo在垂直方向居中
• margin-right:15px：给文本右侧添加间距，控制与Logo的距离

注意事项 #

确保本地图片文件名与team列的内容完全匹配（比如"Manchester City"对应的图片文件名为Manchester City.png），避免因路径错误导致图片无法加载。

内容的提问来源于stack exchange，提问作者M.O