html - html divで垂直方向に中央揃えのhtmlリンクボタンを作成する方法

Question

私はこれについて非常に多くのことを経験しました。しかし、まだ解決策を見つけることができませんでした。すべてのソリューションには、いくつかの制限があります。私の問題に一般化された簡単なcssコードを提供して、htmlリンクボタンをdiv内の垂直方向の中央に配置できますか?

下の画像のように、アカウントの作成ボタンは div google ヘッダーバーの中央にあります:)

Answer 1

line-height同じように設定する必要がありheight、またdisplay: inline-block

ここにフィドルがあります。

sass を使用している場合、mixin を (sass 形式で) 書くのは簡単です。

=button($height: 40px)
  height: $height
  line-height: $height

Answer 2

display:table-cell と vertical-align:middle を組み合わせることができます

<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
  <a href="#link">
    <img src="" />
  </a>
</div>

Answer 3

高さとマージンを適切に設定するだけです。

サンプルフィドル

<div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
</div>

#a {
    overflow: auto;
    background-color: yellow;
    height: 100px;
}
#b {
    height: 80px;
    background-color:red;
    width: 50px;
    float: left;
    margin-top: 10px;
}
#c {
    height: 50px;
    background-color: blue;
    width: 80px;
    float: right;
    margin-top: 25px;
}

Answer 4

私がよくやるこのトリックがあります：

.valign-content:before {
   content : ''; 
   display : inline-block; 
   width : 0; height : 100%; 
   vertical-align : middle; 
}

.valign-content>* { 
   vertical-align : middle; 
   display : inline-block; 
}

デモはこちら: http://jsfiddle.net/pavloschris/5g3Cz/

私のためのトリックはありますか...