使用媒体查询将网格底部分页选择器居中（Kendo升级后问题）

针对Kendo升级后，网格底部分页选择器（.pager-sizes）在≤400px小屏幕下无法居中、且不能使用margin属性的问题，可通过以下两种媒体查询方案解决：

方法一：文本对齐法 #

先给分页选择器的父容器设置文本居中，再确保子元素适配该布局：

@media all and (max-width :400px) {
  /* 替换为分页选择器实际的父容器选择器（如Kendo默认的.k-pager-wrap） */
  .pager-parent {
    text-align: center;
  }
  .pager-sizes {
    display: inline-block;
    /* 清除Kendo可能自带的浮动属性 */
    float: none;
  }
}

方法二：Flex布局法 #

利用Flex布局实现父容器内元素居中，无需关注子元素的display类型：

@media all and (max-width :400px) {
  /* 替换为分页选择器实际的父容器选择器 */
  .pager-parent {
    display: flex;
    justify-content: center;
    /* 如需垂直居中可添加 align-items: center; */
  }
  .pager-sizes {
    /* 无需额外设置display，Flex子元素自动适配 */
  }
}

关键提醒 #

• 需通过浏览器开发者工具确认分页选择器的实际父容器选择器，替换代码中的.pager-parent
• 如果Kendo自带样式给.pager-sizes设置了float或position属性，必须在媒体查询中覆盖（如float: none）
• 确保父容器未设置固定宽度、overflow: hidden等会干扰居中的属性

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