Question

我在使用这个标签时遇到了一些麻烦，它似乎并不想保持垂直居中，它始终位于顶部，如果有人能提供帮助那就太棒了，谢谢。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div><span class="label label-default pull-right">New</span>
        </div>
        <div class="col-md-4">Text</div>
        <div class="col-md-4">Text</div>
    </div>
</div>

@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
    margin-top: 25px;
}
.row {
    margin-bottom: 20px;
}
.row .row {
    margin-top: 10px;
    margin-bottom: 0;
}
[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86, 61, 124, .2);
}
hr {
    margin-top: 40px;
    margin-bottom: 40px;
}
.innertext {
    display:inline-block;
    width:90%
}

Answer 1

您可以从标签中删除类pull-right，然后添加以下属性：

.label {
   display:inline-block;
   vertical-align:middle;
}
.innertext {
    vertical-align:middle;
}

选中此Demo Fiddle

Answer 2

您可以随时添加position: absolute;，top: 50%;和margin-top: -x;（请注意减号）来覆盖，其中x是标签高度的一半。它将使您的标签垂直居中。不要忘记将position: relative;设置为该span元素的父级。它将始终保持在父div的中间。

如果这是你想要的。否则提供更多细节。

这是你的小提琴http://jsfiddle.net/r0gsewtd/

的工作分叉

标签不会保持垂直中心，自举

2 个答案: