html - Bootstrap : Nest label in button

Question

我有一个 .label 嵌套在 .btn 中。当我 .pull-left .label 时，垂直对齐会偏离几个像素(参见 JSfiddle here ):

<div class="container">
    <div class='btn btn-lg btn-primary btn-block'>
        <div class='label label-info pull-left'>BALANCE</div>
        <span>$10.00</span>
    </div>
</div>

如何让标签保持垂直居中？

Answer 1

HTML

<div class="container">
    <div id='balance' class='btn btn-lg btn-primary btn-block'>
        <span class="btn-info">BALANCE</span>
        <span>£<span class='value'>10.00</span></span>
    </div>
</div>

CSS

#balance .btn-info{
  padding:5px;
  border-radius:                    6px;
  -webkit-border-radius:            6px;
  -moz-border-radius:               6px;
}

工作 fiddle http://jsfiddle.net/D2RLR/7477/

或者你可以添加一些类

#balance > div{
   padding-bottom:2px;
}