在 Twitter Bootstrap 中垂直居中

Question

我使用 Bootstrap 是为了在用户将鼠标悬停在铃铛图标上时创建一个类似通知的下拉菜单（字体真棒）。菜单创建好了，菜单中的每个元素都由红色人字形标志表示。我无法将 V 形垂直居中并将文本与 V 形右侧对齐以从同一位置开始（每行开头都有一些边距）。我不能以固定值垂直居中 V 形，因为容器内字符串的长度可以不同，并且 V 形的位置应该动态确定。

基本上，我正在创建一个 jQuery 元素

$("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");`,

人字形与内容一起插入。

JSfiddle here.

HTML

<div class="notifications_wrap text-center center b-l b-r hidden-sm hidden-xs">
   <span class="vlign"> </span>
   <a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
   <i class="glyphicon glyphicon-bell"></i>
   <span class="bubble "></span>
   </a>
   <div class="dropdown-menu notification-toggle1" role="menu" aria-labelledby="notification-center" id="notif">
      <!-- START Notification -->
      <div class="notification-panel">
         <div class="test"></div>
      </div>
   </div>
</div>

CSS

#notif{
    background-color: white;
    color: black;
}

.notification-content{
    text-align: left;
    padding: 10px;
    padding-right: 25px;
    border-bottom: 1px solid #ddd;
    transition: 0.4s ease;
}

.notification-content:hover{
    color: #48B0F7;
}

.notification-toggle1 {
    top: 75px;
    padding: 0;
    z-index: 9999;
    left: 100px;
    width: 250px;
}

/*    > sign of the notification*/
.notification-content >.ion-chevron-right:before {
    color: red;
/*   display:inline-block;*/
    vertical-align: middle;
    line-height: 50%;
    width: 50px;
    height: 20px;
}

.notification-content>span{
    position: relative;
    left: 15px;
}

JS

  $(".notifications_wrap").find("a").mouseover(function(){
        $(".notification-content").remove();
        var random_i=randomNumOfNotifs();
        for(var i=0;i<random_i;i++){
            var randromString = stringGen(randomLength());
            var notification = $("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");
            $("#notif").append(notification);
        }

        $("#notif").animate({height:"show"},500);
    });

Answer 1

您可以添加以下css：

.notification-content >.ion-chevron-right {
    display:table-cell;
    vertical-align:middle;

}

.notification-content>span{
    display:table-cell;
}

这是fiddle