css - css によるラベルの配置が機能しない

Question

div 内にラベルがあります。ラベルを div の中央に配置し、テキストをラベルの左側に配置し、垂直方向に中央揃えにします。パディングとマージンなしでこれを行うにはどうすればよいですか?

http://jsfiddle.net/E3Wb4/

<div class="center">    
    <label style="width:255px;height:40px;display:inline-block;float:center">Test</label>           
</div>


.center {
padding:0px;
background:#B3B3B3;
height:44px;
width:400px;
border-top:2px solid red;
border-bottom:2px solid red;
border-left:2px solid red;
border-right:2px solid red;
}

label{
    border-top:2px solid yellow;
    border-bottom:2px solid yellow;
    border-left:2px solid yellow;
    border-right:2px solid yellow;
}

Answer 1

最良の方法は、margin: 0px auto;ラベルに追加することです。

http://jsfiddle.net/WZ5MU/

を使用してボーダーをショットコードすることもできますborder: 2px solid red;

border: <border-width> || <border-style> || <color>

Answer 2

div.center に line-height: 44px を設定できます

Answer 3

.center{
  position: relative;
}
label{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

これは、要素を中央に配置する良い方法です。