Gaps between buttons when using float: center

Question

I am trying to create a menu at the top of my webpage. I have four buttons I am attempting to connect together at the top of the webspage to make a menu. I am using

float: center;

They are centered but there are small gaps between my buttons. Here is a snippet of my code:

HTML:

<div align="center">
                <a href="index.html">
                    <button align="right" type="button" class="menu1"><span>1. Things you need</span></button>
                </a>
                <a href="setup.html">
                    <button align="right" type="button" class="menu2"><span>2. Setting up your website folders</span></button>
                </a>
                <a href="extrainfo.html">
                <button align="right" type="button" class="menu3"><span>3. Extra Information</span></button>
                </a>
                <a href="layout.html">
                    <button align="right" type="button" class="menu4"><span>4. HTML Layout</span></button>
                </a>
            </div>

CSS:

.menu1 {
    border-radius: 10px 0px 0px 10px;
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu2 {
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu3 {
    padding: 10px 25px;
    background-color: #00FF00;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

.menu4 {
    border-radius: 0px 10px 10px 0px;
    background-color: #00FF00;
    padding: 10px 25px;
    text-align: center;
    border: 1px solid #FFFF00;
    width: auto;
    height: auto;
    float: center;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

I'm sure there is a simple way around this, but I just can't get my head around it.

Thanks in advance!

There is no `float:center`. There is `text-align:center`. You also might not want to use `align=right` either. You can use `text-align:right` and `display:inline-block`. If you make a JSFiddle that might help as well. — ultraloveninja, Apr 29 '17 at 01:44
This might also help as well: http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements — ultraloveninja, Apr 29 '17 at 01:45

Arunava · Answer 1 · 2017-04-29T03:52:29.073

The white space you are referring to are the WhiteSpace-Only text nodes.

That are present in between the buttons, you can start up your developer console and look for it. I tracked them down using the in-built firefox developer tools. I use firebug mostly, but firebug, surprisingly doesn't show them.

According to developer.mozilla ,

The presence of whitespace in the DOM can make manipulation of the content tree difficult in unforeseen ways. In Mozilla, all whitespace in the text content of the original document is represented in the DOM (this does not include whitespace within tags). (This is needed internally so that the editor can preserve formatting of documents and so that white-space: pre in CSS will work.) This means that:

there will be some text nodes that contain only whitespace, and some text nodes will have whitespace at the beginning or end.

Now, here is a function clean that would clean up the whitespace text only nodes,

function clean(node)
{
  for(var n = 0; n < node.childNodes.length; n ++)
  {
    var child = node.childNodes[n];
    if
    (
      child.nodeType === 8 
      || 
      (child.nodeType === 3 && !/\S/.test(child.nodeValue))
    )
    {
      node.removeChild(child);
      n --;
    }
    else if(child.nodeType === 1)
    {
      clean(child);
    }
  }
}

Add this function to your JS file and, Call this function as

clean(document);

to remove text nodes from the entire document or run it specifically on elements, like this,

clean(document.body);

This would clean up your document of all the unwanted whitespace only text nodes

Source: SitePoint

Gaps between buttons when using float: center

1 Answers1