React Native Webview内容居中异常：图片对齐问题求助

核心问题 #

无法修改htmlContent内部元素样式，当前用flex-direction: column+align-items: center包裹时，仅p/a标签居中，img标签靠左；改用text-align:center后，奇数数量的图片最后一张会错位，无法与第1、3、5张左对齐。

最优解决方案：CSS Grid 布局 #

用Grid布局替代Flex或文本对齐，既能让整体内容居中，又能保证图片两列排列时最后一张自动左对齐：

const renderHtml = () => {
  return (
    // 给p/a标签设置跨列居中，避免被网格拆分
    '<style>p, a { grid-column: 1 / -1; text-align: center; margin: 8px 0; }</style>' +
    '<div style="display: grid; background: #efefef; grid-template-columns: repeat(2, auto); gap: 12px; justify-content: center; padding: 16px;">' 
       + htmlContent +
    '</div>'
  );
};

原理说明

• grid-template-columns: repeat(2, auto)：定义两列，列宽自适应图片内容
• justify-content: center：让整个网格容器在父级居中，保证两列整体处于页面中间
• gap: 12px：设置图片间的间距，优化布局美观度
• 内嵌样式中给p/a标签设置grid-column: 1 / -1，让它们占满整个网格宽度，同时用text-align: center保持文本居中，避免被网格拆分

备选 Flex 方案（需图片宽度一致） #

如果偏好Flex布局，可通过flex-wrap实现，但要求所有图片宽度相同：

const renderHtml = () => {
  return (
    '<style>p, a { width: 100%; text-align: center; margin: 8px 0; } img { flex: 0 0 calc(50% - 6px); margin: 3px; }</style>' +
    '<div style="display: flex; background: #efefef; flex-wrap: wrap; justify-content: center; padding: 16px;">' 
       + htmlContent +
    '</div>'
  );
};

原理说明

• flex-wrap: wrap：允许内容换行
• justify-content: center：让每行内容居中
• 给img设置固定宽度（50%减去间距），确保每行最多两张，最后一张自动左对齐在第一列位置

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