title: How to align multiple buttons inside a row in html?
body: <p>I am working on aligning two buttons to the middle of the row which is just below a table in the form.</p>
  
  <p>But the alignment of buttons is vertical now. How do I make them horizontal and to the middle.</p>
  
  <p><a href="https://i.stack.imgur.com/bYyiL.png" rel="nofollow noreferrer">This is how it is being displayed now</a></p>
  
  <p><a href="https://i.stack.imgur.com/Pyf2g.png" rel="nofollow noreferrer">For Joykal Infotech reference in IE after adding vendor prefixes</a></p>
  
  <p>I want to align them properly to the middle of the row and the buttons should be on same axis. Return to Login should not be in multiple lines.</p>
  
  <p>Here's what I tried.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.blueButton { /* Blue Button sized for submit */
              position:relative;
              margin:0;
              background:transparent url('../images/btn_blue_back.gif') repeat-x;
              color:white;
              padding:0 4px 6px 4px;
              text-align:center;
              width:45px;
              margin-left:520px;
          }
          div.blueButton_left {
              background:transparent url('../images/btn_blue_l.gif') no-repeat left;
              width:7px; height:22px;
              position:absolute;
              top:-2px; left:-2px;    
          }
          div.blueButton_right {
              background:transparent url('../images/btn_blue_r.gif') no-repeat right;
              width:7px; height:22px;
              position:absolute;
              top:-2px; right:-3px;   
          }
  
  a.button, .button {
              width:auto;
              padding:0; margin:0 0 0 0;
              background:#005499;
              font-size:11px; font-weight:bold; color:white; text-decoration:none;
              cursor:pointer;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;div class="blueButton"&gt;
  &lt;div class="blueButton_left"&gt;&lt;/div&gt;
  &lt;div class="blueButton_right"&gt;&lt;/div&gt;
  &lt;a href="" onclick="javascript:forgotUsername();return false;" class="button" onblur="javascript:f_setfocus();"&gt;Return to LogIn&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="blueButton"&gt;
  &lt;div class="blueButton_left"&gt;&lt;/div&gt;
  &lt;div class="blueButton_right"&gt;&lt;/div&gt;
  &lt;a href="" onclick="javascript:forgotUsername();return false;" class="button" onblur="javascript:f_setfocus();"&gt;Continue&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>