如何使页面上的按钮居中

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

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

然后设置按钮样式

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

Answer 3

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

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

我会像 Lucas 一样处理它 - 试试这个 fiddle：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/（您需要将 'test' 替换为您的“$(element)”选择器。）

我已经调整了 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"
});

如您所见，Jquery 负责处理浏览器前缀。所以这会将你的 $(element) 包装在 div 中，class 为 "button-contain"，然后它会根据应用的样式设置按钮的 CSS。最后，您需要在 CSS 中添加一个 class（除非您还想使用 Jquery 处理 "button-contain" 样式）。所以你的 button-contain 将具有与前面提到的相同的样式：

.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 将替换任何现有的 'style' 标签）：

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);

这将产生您想要的结果。这是更新后的 Fiddle，其中包含我所涉及的所有内容：https://jsfiddle.net/rockmandew/fhceb7dv/13/

Answer 5

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

如何使页面上的按钮居中

How to center a button on a page

html

javascript

css

jquery

visual-studio-lightswitch