Javascript 如何在页面上居中放置按钮

我的按钮的

\u postrend

功能中有以下代码：

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%"
    });
};

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

结果是：

左侧填充

、

左侧边距

和

右侧边距

应用于

div

很好。但是

查找（“ui-btn-inner”）

似乎根本不起作用。而且

页边距

标记似乎没有考虑按钮的

宽度

，以使其位于页面中心。我错过了什么

---

---

注意：对于这个简单的案例，公认的答案非常有效。尽管@rockmandew的第三次更新为那些希望进行更复杂放置的人提供了一个更强大的选择。

要对齐按钮，请添加

“transform”：“translateX（-50%）”

---

尝试将父位置设置为

position:relative

然后设置按钮样式

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

回答为什么它不工作：您忘记了类选择器

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的原因之一）

---

我会像卢卡斯一样处理它-试试这把小提琴：

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

.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-希望这对您有意义。如果您需要进一步的澄清，请询问

第一次更新：

好的，看一下：（您需要用“$（元素）”选择器替换“test”。）

我已经调整了Jquery实现的代码——因为代码是自动生成的，所以我已经包含了一行代码，它将用我前面提到的“button contain”包装您的目标元素。然后，我将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"
});

希望这对你有用。不过，我不确定填充物到底是怎么回事。让我们看看这会给你带来什么，然后从那里开始

第二次更新：

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

$("#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;"
});

如您所见，我必须重新包含浏览器前缀，因为我们不再使用.css（）处理解决方案-一旦您拥有具有所需样式的变量，您将需要通过以下函数运行它：

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%"
    });
};

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

---

这将产生您想要的结果。这里有一个更新的提琴，上面有我提到的所有东西：

你是想把按钮水平居中吗？@rockmandew正确。我只希望它水平居中，并具有响应性。我在这里的其他地方看到了

文本对齐

建议。那根本不起作用，按钮一直放在左边。不过，您的

转换

解决方案非常有效。需要仔细阅读一下。你知道为什么

find（）

不起作用吗？它只有11像素，从视觉上看，它看起来足够居中。但是，为了我自己的启发（以及将来可能的用途），我想知道为什么这不起作用。链接很有趣，我在学习jQuery时不知道。但不幸的是，使用类选择器不起作用。

ui-btn-internal

上左侧的

填充保持在11px。如果你能弄清楚为什么我会非常想知道。@embedded.kyle-我假设是因为样式正在设置，因为他说这是自动生成的代码-我假设（这不是最佳实践）添加！样式的重要标记将使其工作。编辑：抱歉，我以为我是在回复发布此答案的人，而不是OP:Pun。幸运的是，我使用的是Lightswitch，其中HTML和大部分CSS是自动生成的。我要寻找的是对自动代码进行必要调整的最小jQuery javascript代码。尽管我想听听您对
moz
、
ms
和
webkit
特定转换的重要性的看法。我在IE11和Chrome 45之间做了一个快速测试，我觉得它们很好。你可以通过JS/Jquery代码来完成所有这些-给我一点时间，我可以帮你。我现在正在回答一些问题。@embedded.kyle-请告诉我这是否对您有效，因为我无法测试我所做的最后一次更新（即“cssText”，“padding left:0！important；”），您的第一次更新非常有效。对于第二个，是不是
，
应该是
：
？我把它改成那个样子，按钮在水平方向上变小了，一直向左。
div
的
style
属性中唯一的内容是
padding left:0！重要的。我不知道您为什么要使用
cssText
。指示应该用于“设置元素的样式”。但是没有段落标签。只需
、
和
。StackExchange系统旨在将高质量的答案推到顶端。但是，唉，我只能投一票。虽然你说得很对。我在原来的问题中添加了一个注释，让您的答案更具可视性，并帮助您登上榜首。干杯
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;';

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

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