居中按钮，不居中？

Question

因此，我试图建立自己的网站（是的，我终于吸了口气，开始做标记，叹了口气）-我遇到的问题是我试图使按钮居中，但偏移了一点。 没有<center>话，一直到左边。

还尝试了：

style="align-items:center"

<div id="form-container" style="align-items:center;">
    <div>
        <fieldset>
        <center><a href="/ReduxLauncher.zip"><input class="button0" value="Install Redux" type="button" /></a></center>
        </fieldset>
    </div>
</div>

Answer 1

尝试在父text-align:center ，或使用left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); 父母没有position:static （默认）

我还建议您检查Bootstrap，因为它具有不错的网格布局，可让您定义诸如.btn-default或.nav class="col-xs-12"在您的情况下， 只需定义 class="col-xs-12" ， 即可定义要放置列的页面的哪十二个class="col-xs-12"放在另一列中

它们还具有非常好的表单和输入按钮等样式（请参见下面我的示例网站上的视频）

在查看示例时，请尝试调整浏览器的大小。 几乎可以定义class="col-xs-12"如果您希望它在超小型（移动）和大型设备上显示为行的12/12宽度，则可以将它们混合使用class="col-xs-12 col-md-6"因此它将在较大（平板电脑）尺寸的设备上拆分行。 它是GitHub上排名第一的存储库，只需30分钟即可阅读Grid Layout并搜索“ Nav”和“ Button”元素。

我最近创建了一个快速站点http://neaumusic.github.io ，随时检查一下，祝您好运

Answer 2

您只需将<center>放在<div> <center>之前，将其关闭在</div> 。 像这样：

<center>
<div id="form-container" style="align-items:center;">
    <div>
        <fieldset>
        <a href="/ReduxLauncher.zip"><input class="button0" value="Install Redux" type="button" /></a>
        </fieldset>
    </div>
</div>
</center>

我还为您制作了CodePen和JSFiddle 。

Answer 3

两种方式：

1）设置margin-left: auto; AND margin-right: auto; 到包含div

要么

2）设置display:flex; 和justify-content:center; 到父容器。

Google flex box提供了更多信息，一旦掌握了它，它对于布局非常有用。

如评论中所述，不再支持中心标签。

Answer 4

如果您尝试#form-container { text-align: center; } #form-container { text-align: center; } ？ 它将居中所有孩子，包括按钮。

Answer 5

我绝对会建议使用flexbox，唯一的问题是对ie8 / 9的支持。

它确实使布局变得非常容易，并且您不必创建非常特定的，通常是任意的边距即可使您的内容很好地对齐，尤其是垂直对齐。

您的对齐选项在容器和项目之间划分。 它也行和列的布局。

这是我用来入门的链接。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/