如何将按钮在页面上居中

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

要回答为什么，它不起作用：您忘记了类选择器.。

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 3

我会像卢卡斯一样对待它-试试这个小提琴：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;
}

该解决方案的唯一问题是，您必须在按钮上设置一个显式的高度，并在按钮容器上设置相同的高度，这将使其他内容能够响应按钮的高度。当您将按钮设置为“绝对”时，它将从常规流中删除，因此，如果您未在包含div上设置高度，则div的高度将为0-希望这对您有意义。如果您需要进一步的澄清，请问！

第一次更新：

[好吧，看一下：https://jsfiddle.net/rockmandew/fhceb7dv/1/（您需要用“ $（element）”选择器替换'test'。）

我已经调整了Jquery实现的代码-由于代码是自动生成的，因此我提供了一行代码，该代码行将使用前面提到的“按钮包含”包装您的目标元素。然后，我在上面链接了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处理浏览器前缀。因此，这会将您的$（element）包装在具有“ button-contain”类的div中，然后将根据所应用的样式设置按钮的CSS。最后，您将需要向CSS添加一个类（除非您也想使用Jquery处理“包含按钮”的样式）。因此，包含按钮的样式将与前面提到的样式相同：

.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所指出的，我第二次更新中的代码有错误-“ cssText”后应跟'：'而不是'，'

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

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 4

尝试将父级职位设置为position: relative

然后设置按钮样式

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

Answer 5

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