html css按钮水平对齐

Question

I am having an issue with the alignment of buttons in HTML/CSS.

I have created a fiddle here: https://jsfiddle.net/wkt4tdL3/1/

And here is my HTML:

<div id="welcome-screen">
   <H2 id="welcome-title">Click on the flashcards you would like to use:    </H2>
   <br>
   <br>
   <button id="CSS-button">CSS</button>
   <br>
   <br>
   <button id="HTML-button">HTML</button>
</div>

And here is my CSS:

html, body {
    padding: 0px;
    margin: 0px;
}

#welcome-screen {
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

#welcome-screen button {
    color: blue;
    background-color: yellow;
    font-weight: bold;
    border-radius: 5px;
    width: 50px;
}

I would like the buttons to be directly below each other. But, as you should be able to see in the fiddle, the second button is ever so slightly to the right of the first button.

Any help would be appreciated.

Answer 1

I recommend abandoning anything with lots of "br" tags...occasionally you get added spaces...and just managing margins can be dangerous.

Look here :: https://jsfiddle.net/beauxjames/93mvzL3s/

now you can add more buttons easily and manage them as a list

<ul class="buttonWrapper">
    <li><button id="CSS-button">CSS</button></li>
    <li><button id="HTML-button">HTML</button></li>
</ul>

Then with a couple simple styles

ul.buttonWrapper { list-style-type:none;padding:0;margin:0; width: 100%; }
ul.buttonWrapper li { text-align: center;margin-bottom: 5px; }

you get more control

Answer 2

This solves the issue:

#HTML-button
{
    margin-right:2px;
}

Check the fiddle

Alternatively you could do this also:

#welcome-screen {
    width: 320px;
    margin: 0 auto;
    text-align: center;
    display:inline;
}

#welcome-screen button {
    margin-left:200px;
    color: blue;
    background-color: yellow;
    font-weight: bold;
    border-radius: 5px;
    width: 50px;
}

Check the fiddle

Answer 3

While ReadyToHelp's answer does visually fix the problem I don't think long term adding margin to something this simple is a good idea.

The reason the second button is slightly offset is because of the whitespace being used, if we change the html to

<button id="CSS-button">CSS</button><br><br><button id="HTML-button">HTML</button>

Then the buttons line up as expected, this also means going forward you don't have to remember to accommodate for the margin you have added.

You can also use

<button id="CSS-button">CSS</button><!--
--><br><br><!--
--><button id="HTML-button">HTML</button>

However I would strongly recommend not using br tags for positioning elements and instead use

<div><button id="CSS-button">CSS</button></div>
<div><button id="HTML-button">HTML</button></div>