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

你可以为 div.center 设置 line-height: 44px

Answer 2

最好的方法是添加margin: 0px auto;到标签。

http://jsfiddle.net/WZ5MU/

您还可以使用拍摄代码边框border: 2px solid red;

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

Answer 3

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

这是使元素居中的好方法。