中心按钮，不居中？

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 ，因为它有一个漂亮的网格布局，可以让您定义要放置列的页面的12个，只需定义类别，例如.btn-default或.nav或您的案例class="col-xs-12"内的其他列

对于表单和输入按钮等，它们也有非常好的样式（请参阅下面我的示例网站上的视频）

在查看示例时尝试调整浏览器大小。实际上，如果您希望它在超小型（移动）和LARGER设备上显示为行的12/12宽度，则可以定义class="col-xs-12"，并且可以将它们class="col-xs-12 col-md-6"混合，以便它将分割行在更大（平板）尺寸的设备上。它是GitHub上的第一个存储库，只需要大约30分钟来阅读网格布局并搜索＆＃34; Nav＆＃34;和＆＃34;按钮＆＃34;元件。

我最近制作了一个快速网站http://neaumusic.github.io，随时查看，祝你好运

Answer 2

您只需将<center>放在<div>之前，然后在</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;和margin-right: auto;设置为包含div为准或者



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

  

谷歌弹性框提供更多信息，一旦你掌握了它，它对布局非常有用。

     

    

      

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

    

  

Answer 4

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

Answer 5

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

它确实使布局变得如此简单，并且您不必创建非常具体的，通常是任意的边距，以使您的东西很好地对齐，尤其是垂直对齐。

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

这是我用来开始的链接。

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