Я не могу центрировать кнопку рядом с div

Question

Я собирался сделать боковую панель рядом с div с 5 или 4 бесполезными кнопками, но я не могу центрировать кнопку «Лучший сайт» вертикально рядом с кнопкой, я не знаю, что делать. Я пробовал много вещей, и никто из них не работал.

* { 
 
    font-family: Rockwell; 
 
} 
 
#go { 
 
    border: 1px solid #000000; 
 
    border-radius: 50px; 
 
    background-color: #aacc33; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
#fack { 
 
    width: 120px; 
 
    height: 40px; 
 
} 
 
#fon { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 40px; 
 
    display: table-cell; 
 
    padding-left: 9px; 
 
} 
 
.menu { 
 
    display: inline-block; 
 
    background-color: #9ce6ff; 
 
    border: 2px solid #000000; 
 
    border-radius: 16px; 
 
}

<div id="fack" class="menu"> 
 
    <h3 id="fon">The Button</h3> 
 
</div> 
 
<a href="http://animatedpizzagifs.com"> 
 
    <button id="best" class="menu">Best site</button> 
 
</a> 
 
<p>Press it: 
 
    <button id="go" onclick="alert(42)"><strong>Go!</strong> 
 
    </button> 
 
</p>

Answer 1

Просто используйте свойство vertical-align: middle; использованный с другой кнопкой, чтобы выровнять его. Вы можете увидеть это в этом fiddle.