Question

我在按钮的_postRender功能中有以下代码：

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).find("ui-btn-inner").css({
        "padding-left": "0"
    });
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    });
};

结果如下：

padding-left，margin-left和margin-right正在应用于div。但find("ui-btn-inner")似乎根本不起作用。并且margin标记似乎没有考虑按钮的width以使其到达页面的中心。我在这里缺少什么？

注意：对于这个简单的案例，接受的答案非常有效。虽然@ rockmandew的第三次更新为那些希望进行更复杂的展示位置的人提供了更强大的选择。

Answer 1

要对齐按钮，请添加"transform":"translateX(-50%)"

$(element).css({
    "padding-left": "0",
    "margin-left": "50%",
    "transform":"translateX(-50%)"
});

Answer 2

$(element).parent().css({
    "display": "flex",
    "align-items": "center",
    "justify-content": "center"
});

Answer 3

要回答为什么它无效：您忘记了班级选择器.。

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).find(".ui-btn-inner").css({
        "padding-left": "0"
    });
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    });
};

如果您愿意，甚至可以链接这些功能。（我非常喜欢jQuery的原因之一）

myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
    $(element).css({
        "padding-left": "0",
        "margin-left": "50%",
        "margin-right": "50%"
    }).find(".ui-btn-inner").css({
        "padding-left": "0"
    });
};

Answer 4

我会像卢卡斯一样接近它 - 试试这个小提琴：http://jsfiddle.net/rockmandew/ddow1nd9/

基本上，我按下按钮并将其样式设置为以下内容：

.test {
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  height:25px;
}

但是，这不会单独工作 - 您需要将按钮包装在容器（div）中并将其位置设置为相对位置。您可以在以下样式中看到：

.button-contain {
  position:relative;
  height:25px;
}

此解决方案的唯一问题是您必须在按钮上设置明确的高度并在按钮容器上设置相同的高度，这将允许其他内容响应按钮的高度。当您设置按钮Absolute时，它会将其从正常流程中移除，因此如果您不在包含div上设置高度，则div的高度为0 - 希望这对您有意义。如果您需要进一步澄清，请询问！

第一次更新：

好的，请看一下：https://jsfiddle.net/rockmandew/fhceb7dv/1/（您需要使用＆＃34; $（元素）＆＃34;选择器替换＆＃39;测试＆＃39;）

我已经调整了Jquery实现的代码 - 因为代码是自动生成的，我已经包含了一行代码，它将使用＆＃34;按钮包含＆＃34;来包装目标元素。我之前提到过。然后，我将CSS属性链接在其上：

$('.test').wrap("<div class='button-contain'></div>").css({
  "position":"absolute",
  "left":"50%",
  /* My understanding is that the jQuery .css() will add browser prefixes automatically
  "-moz-transform":"translate(-50%, 0)",
  "-ms-transform":"translate(-50%, 0)",
  "-webkit-transform":"translate(-50%, 0)",
  */
  "transform":"translate(-50%, 0)",
  "height":"25px"
});

如您所见，Jquery负责浏览器前缀。因此，这将使用＆＃34;按钮包含＆＃34;的类将$（元素）包装在div中，然后根据应用的样式设置按钮的CSS。最后，您需要在CSS中添加一个类（除非您想要使用Jquery处理＆＃34;按钮包含＆＃34;样式）。所以你的按钮包含的风格与前面提到的相同：

.button-contain {
  position:relative;
  height:25px;
}

希望这适合你。我不确定填充物是怎么回事。让我们看看这会让你走到哪里并从那里开始。

第二次更新：

尝试使用以下代码的类似应用程序：

$("#elem").css("cssText", "width: 100px !important;");

所以而不是：

$(element).css({"padding-left": "0 !important"});

尝试使用它：

$('.test').wrap("<div class='button-contain'></div>").css({
  "position":"absolute",
  "left":"50%",
  /* My understanding is that the jQuery .css() will add browser prefixes automatically
  "-moz-transform":"translate(-50%, 0)",
  "-ms-transform":"translate(-50%, 0)",
  "-webkit-transform":"translate(-50%, 0)",
  */
  "transform":"translate(-50%, 0)",
  "height":"25px",
  "cssText", "padding-left:0 !important;"
});

我还没有对此进行测试，因为我不想花时间设置一个例子，但我相信它会起作用。试一试，让我知道。

第三次更新：

正如OP指出的那样，我的第二次更新中的代码有一个错误 - ＆＃34; cssText＆＃34;应该遵循＆＃39;：＆＃39;不是＆＃39;，＆＃39;

此外，为了响应OP附加注释，我调整了我的解决方案以覆盖初始填充并应用所有新的（所需）样式。为此，您需要创建一个包含要应用的所有样式的变量（这是因为cssText将替换任何现有的＆＃39;样式标记）：

var csstxt = $('.testTwo').css('cssText') + ';position:absolute;left:50%;transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);height:25px;padding-left:0 !important;';

正如您所看到的，我不得不重新包含浏览器前缀，因为我们不再使用.css（）处理解决方案 - 一旦您拥有了所需样式的变量，您将需要通过以下功能：

$('.testTwo').css('cssText', csstxt);

这将产生您想要的结果。这是一个更新的小提琴，包含了我所涉及的所有内容：https://jsfiddle.net/rockmandew/fhceb7dv/13/

Answer 5

尝试将父位置设为position: relative

然后设置按钮样式

left: 0;
right: 0;
position: absolute;
margin: 0 auto;

如何使页面上的按钮居中

5 个答案: