How do I stop the button wiggle and center them in the div?

Question

I have been trying to get this simple menu example going but I have two problems.

The buttons wiggle when hovered.
The image/text inside of the hover box is not centered.

Any help that you would be willing to provide is really appreciated. I am really trying to learn what I am doing wrong, so any explanation you can provide would be very awesome.

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>

<head>
  <title>Cool Button Menu Example</title>
</head>

<style>
  #coolButtonTopMenu .divButtons {
    float: left;
    padding: 3px;
    margin: 2px;
    border: 3px solid white;
    height: 65px;
  }

  #coolButtonTtopMenu .divButtons img {
    margin-top: -15px;
  }

  #coolButtonTopMenu .btnSmall {
    padding: 3px;
    float: left;
    margin: auto;
    margin: 2px;
  }

  #coolButtonTopMenu .btnSmallText {
    font-family: "verdana" sans-serif serif;
    font-size: x-small;
    padding: 3px;
    width: 45px;
    text-align: center;
  }

  #coolButtonTopMenu .divButtons:hover {
    /*border: 3px dotted #F59595;*/
    padding: 3px;
    margin: 2px;
    /*background-color: #F59595;*/
    height: 65px;
  }

  #coolButtonTopMenu .divButtons a {
    text-decoration: none;
    color: black;
    display: block;
  }

  #coolButtonTopMenu .divButtons a:active {
    border-top: 0px solid orange;
    text-decoration: none;
  }

  #coolButtonTopMenu .mnuWorkQueueMain {
    float: left;
  }

  #coolButtonTopMenu .mnuWorkQueueMain:hover {
    border: 3px dotted #F59595;
  }
</style>

<script>
  // Functions to do work
  function doSomething() {
    alert('Button was clicked .....');
  }
</script>

<!-- Menu Test -->
<div id='coolButtonTopMenu'>
  <!-- Menu Item 1 -->
  <div class="mnuWorkQueueMain">
    <div id="mnuBtnSave" class="divButtons">
      <a href="#" alt="Add" onclick='doSomething()'>
        <img src="images/AddIcon.png" class="btnSmall" />
        <p class="btnSmallText">New Request</p>
      </a>
    </div>
  </div>

  <!-- Menu Item 2 -->
  <div class="mnuWorkQueueMain">
    <div id="mnuBtnSave" class="divButtons">
      <a href="#" alt="Add" onclick='doSomething()'>
        <img src="images/AddIcon.png" class="btnSmall" />
        <p class="btnSmallText">New Thing</p>
      </a>
    </div>
  </div>

  <!-- Menu Item 3 -->
  <div class="mnuWorkQueueMain" ">
                <div id="mnuBtnSave " class="divButtons ">
                    <a href="# " alt="Add " onclick='doSomething()'>
                    <img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
                </div>
            </div>

        </div>
    </html>

duplicate of the first issue : https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element — Temani Afif, Aug 22 '18 at 23:29

score 2 · Answer 1 · answered Aug 22 '18 at 23:36

The problem that you are facing when hovering over the buttons is that a border takes up space and that border is applied when you hover, creating the "wiggle". To resolve this, you may consider moving away from a border and instead use an outline, which does not increase the size.

As far as centering the content goes, you need to be applying text-align: center; to the parent element for which you would like the child elements centered. In your case, you would apply this rule to #coolButtonTopMenu .divButtons.

// Functions to do work
function doSomething() {
  alert('Button was clicked .....');
}

#coolButtonTopMenu .divButtons {
  float: left;
  padding: 3px;
  margin: 2px;
  border: 3px solid white;
  height: 65px;
  text-align: center;
}

#coolButtonTtopMenu .divButtons img {
  /*margin-top: -15px;*/
}

#coolButtonTopMenu .btnSmall {
  padding: 3px;
  /*float: left;*/
  margin: auto;
  /*margin: 2px;*/
}

#coolButtonTopMenu .btnSmallText {
  font-family: "verdana" sans-serif serif;
  font-size: x-small;
  /*padding: 3px;*/
  width: 45px;
  text-align: center;
}

#coolButtonTopMenu .divButtons:hover {
  /*border: 3px dotted #F59595;*/
  padding: 3px;
  margin: 2px;
  /*background-color: #F59595;*/
  height: 65px;
}

#coolButtonTopMenu .divButtons a {
  text-decoration: none;
  color: black;
  display: block;
}

#coolButtonTopMenu .divButtons a:active {
  border-top: 0px solid orange;
  text-decoration: none;
}

#coolButtonTopMenu .mnuWorkQueueMain {
  float: left;
  margin: 3px;
}

#coolButtonTopMenu .mnuWorkQueueMain:hover {
  outline: 3px dotted #F59595;
}

<!-- Menu Test -->
<div id='coolButtonTopMenu'>
  <!-- Menu Item 1 -->
  <div class="mnuWorkQueueMain">
    <div id="mnuBtnSave" class="divButtons" onclick='doSomething()'>

      <img src="images/AddIcon.png" class="btnSmall" />

      <p class="btnSmallText">New Request</p>
    </div>
  </div>

  <!-- Menu Item 2 -->
  <div class="mnuWorkQueueMain">
    <div id="mnuBtnSave" class="divButtons">
      <a href="#" alt="Add" onclick='doSomething()'>
        <img src="images/AddIcon.png" class="btnSmall" />
      </a>
      <p class="btnSmallText">New Thing</p>
    </div>
  </div>

  <!-- Menu Item 3 -->
  <div class="mnuWorkQueueMain" ">
            <div id="mnuBtnSave " class="divButtons ">
                <a href="# " alt="Add " onclick='doSomething()'>
                <img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
            </div>
        </div>

    </div>

Thank you Adam I appreciate the help. – JD Sanders Aug 22 '18 at 23:46 — JD Sanders, Aug 22 '18 at 23:46

How do I stop the button wiggle and center them in the div?

1 Answers1