在 Twitter 中垂直居中 Bootstrap

Question

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

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

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

然后 V 形符号随内容一起插入。

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

在 Twitter 中垂直居中 Bootstrap

Vertically Center in Twitter Bootstrap

html

css

twitter-bootstrap

font-awesome