CODEWITHSUNDEEP
htmlcssbuttonalignment
kosher
kosher

Reputation: 333

html css button horizontal alignment

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.

Upvotes: 1

Views: 1741

Answers (3)

samuelmr
samuelmr

Reputation: 617

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>

Upvotes: 0

beauXjames
beauXjames

Reputation: 8418

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

Upvotes: 1

m0bi5
m0bi5

Reputation: 9452

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

Upvotes: 0

Related Questions