Centered Button, Not Centered?

Question

So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.

Also tried :

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

Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)

I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column

They also have really nice styles for forms and input buttons etc. (see video on my example site below)

Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.

I recently made a quick site http://neaumusic.github.io , feel free to check it out, and good luck

Answer 2

You just have to put <center> before your <div> and close it after </div> . Like this:

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

I've also made a CodePen and a JSFiddle for you.

Answer 3

Two ways:

1) Set margin-left: auto; AND margin-right: auto; to the containing div

OR

2) Set display:flex; AND justify-content:center; to the parent container.

Google flex box for a little more information, its very useful for layout once you get the hang of it.

As stated in the comments, the center tag is no longer supported.

Answer 4

What about if you try #form-container { text-align: center; } #form-container { text-align: center; } ? It will center all children, including button.

Answer 5

I would definitely recommend using flexbox, the only issue being ie8/9 support.

It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.

Your alignment options are split between the container and the items. It does row and column layout too.

Here is a link I used to get me started.

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