如何在我的案例中垂直对齐中间的文本

Question

我试图在我的案例中垂直对齐我的div文本。

我有类似

的东西

<div id="wrapper" class="container">
    <div class="row">
        <div class="col-xs-offset-1 col-xs-2 test">
             <div class="row test-bar">
                <div class="col-xs-9">
                    <span>Title 1</span>
                </div>
                <div class="col-xs-3" >
                    <button><span class="glyphicon glyphicon-cog"></span></button>
                </div>
            </div>
        </div>
        <div class="col-xs-9">
           other contents...
        </div>
   </div>
</div>

CSS SASS 

#wrapper{
    margin-top:30px;
      .test {
          margin-right:3px;
          min-height:380px;
             .tesr-bar {
                 background-color:#E3E3E3;
                    span {
                        line-height:25px;
                        vertical-align:middle;
                    }
             }
      }
   }
}

出于某种原因，我无法调整文字＆＃39; Title 1＆＃39;为vertical-align middle。有人可以帮我这个吗？谢谢！

Answer 1

jsfiddle

＆＃13;

＆＃13;

span {
    margin:auto;
    display:table;
}
#wrapper {
    margin-top:30px;
    .test {
        margin-right:3px;
        min-height:380px;
        .tesr-bar {
            background-color:#E3E3E3;
            span {
                line-height:25px;
            }
        }
    }
}
}

＆＃13;

<div id="wrapper" class="container">
    <div class="row">
        <div class="col-xs-offset-1 col-xs-2 test">
            <div class="row test-bar">
                <div class="col-xs-9"> <span>Title 1</span>

                </div>
                <div class="col-xs-3">
                    <button><span class="glyphicon glyphicon-cog"></span>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-xs-9">other contents...</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;