垂直中心在Twitter Bootstrap [英] Vertically Center in Twitter Bootstrap

问题描述

我使用Bootstrap为了创建一个类似通知的下拉当用户鼠标移动铃声图标（字体awesome）。菜单创建好了，菜单中的每个元素都用红色的V形符号表示。我不能垂直居中的雪佛龙，并将文字对齐到雪佛龙的右边，从同一个地方开始（每行开头有一些边距）。我不能垂直居中具有固定值的人字形，因为容器内的字符串的长度可以不同，并且动态地确定人字形的位置。

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

  $（< div class ='notification-content'>< i class ='ion-chevron-right'>< / i>< span class =''>+ randromString +< / span>< / div>）;`，
  

并且雪佛龙与内容一起插入。

JSfiddle 这里。

HTML

hidden-sm hidden-xs>
< span class =vlign> < / span>
< a href =＃id =notification-centeraria-havepopup =truedata-toggle =dropdown>
< i class =glyphicon glyphicon-bell>< / i>
< span class =bubble>< / span>
< / a>
< div class =dropdown-menu notification-toggle1role =menuaria-labelledby =notification-centerid =notif>
<！ - START通知 - >
< 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; 
} 
 
 / *>通知的标志* / 
 .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  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）; 
}）; 
  

解决方案

您可以添加以下css：

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

}

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

这里是小提琴

I'm using Bootstrap in order to create a notification-like drop down when the user mouseovers the bell icon (font-awesome). The menu is created alright, each element inside the menu is indicated by a red chevron sign. I'm not able to center the chevron vertically and align the text to the right of the chevron to start from the same place (there's some margin at the beginning of each line). I cant vertically center the chevron with a fixed value because the length of the string inside the container can be different and the position of the chevron should be determined dynamically.

Basically, I'm creating a jQuery element

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

and the chevron is inserted with the content.

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);
    });

解决方案

You can add the following css:

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

}

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

Here is a fiddle

这篇关于垂直中心在Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！