Splunk Dashboard单行10个面板内容未居中问题求助

问题背景 #

你的Splunk Dashboard某一行包含10个面板，指标内容无法居中；之前尝试调整面板宽度的CSS代码导致面板换行，不符合一行展示的需求。

解决方案 #

通过以下CSS代码，可同时实现面板一行展示和内容居中的效果：

<html>
  <style>
    /* 定位目标行，强制面板不换行 */
    .dashboard-row:nth-of-type(1) { /* 替换1为目标行的实际序号，比如第3行写3 */
      display: flex;
      flex-wrap: nowrap;
      gap: 6px; /* 面板间间距，可按需调整 */
    }

    /* 设置该行内每个面板的宽度，确保一行容纳10个 */
    .dashboard-row:nth-of-type(1) .dashboard-panel {
      width: calc(10% - 6px) !important; /* 减去gap宽度，避免超出父容器 */
      flex-shrink: 0; /* 禁止面板被压缩变形 */
    }

    /* 让面板内的指标内容全局居中 */
    .dashboard-row:nth-of-type(1) .dashboard-panel .panel-body {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; /* 保证垂直方向也居中 */
    }

    /* 针对单值面板的数值和标签单独优化 */
    .dashboard-row:nth-of-type(1) .single-result .single-value,
    .dashboard-row:nth-of-type(1) .single-result .single-label {
      text-align: center;
      width: 100%;
    }
  </style>
</html>

关键说明 #

1. 定位目标行：将代码中的nth-of-type(1)替换为目标行的实际序号（可通过浏览器F12开发者工具查看行的DOM结构确认）。
2. 宽度适配：calc(10% - 6px)是按10个面板均分100%宽度，减去面板间距的计算值，确保总宽度不超出父容器，避免换行。
3. 内容居中：通过text-align: center（水平居中）和flex布局的justify-content、align-items（垂直+水平居中），覆盖Splunk默认的左对齐样式。
4. 旧代码问题：你之前的代码给部分面板设置25%、30%、45%的宽度，总和远超100%，导致面板自动换行，且未添加内容居中的样式。

适配调整 #

如果你的面板有自定义ID，可替换.dashboard-panel为具体ID选择器（比如#panel-id-1, #panel-id-2, ..., #panel-id-10），精准定位目标面板。

内容的提问来源于stack exchange，提问作者Patrick O'Rourke