如何使 jquery 移动加载器中 ui-loader 的宽度更宽？

Posted 2023-05-08

【中文标题】如何使 jquery 移动加载器中 ui-loader 的宽度更宽？

【英文标题】：How to make width of ui-loader in jquery mobile loader wider?

【发布时间】：2018-03-28 00:31:19

【问题描述】：

目前，我在我的项目中使用来自 jQuery-mobile 的 Loader Widget。这是文档：https://api.jquerymobile.com/loader/

加载本身的 UI 位于具有 ui-loader 类的 div 中。就我而言，我需要扩大这个元素。我试图简单地更改其默认宽度，但它反而破坏了元素位置。因此，是否有任何适当的方法可以使ui-loader 的宽度变宽？

这是我的代码： https://jsfiddle.net/yusrilmaulidanraji/u1q4xjnt/1/

这是默认条件：

在我尝试更改其宽度后，该位置不再位于中心页面上：

【问题讨论】：

尝试设置width: 100%和left: 0;

@Krusader 不，它不能正常工作。 :(ibb.co/ka3frR

在此处添加margin: 0 auto; 示例：jsfiddle.net/u1q4xjnt/2

【参考方案1】：

将加载器的定位切换到绝对位置应该可以。然后可以使用以下 CSS 将其居中：

.ui-loader 
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;

这会将位置设置为绝对位置，并使用 left、top 和 transform 的组合使其居中。无论宽度是多少，这都应该有效。

希望这会有所帮助。