Div получить нижнее положение вместо верхнего

Question

Я не понимаю, почему мой div под «Rechercher par» находится в нижней части строки, а не сверху.

Вот мой HTML:

<div class="col-md-5"> 
       <h5 class="margin-bottom-null"><span class="widget-title">Rechercher par</span></h5> 
       <div class="label-ombrage"></div> 
       <div class="div-inline"> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">CRÉEZ UN COMPTE</span></div> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">VOS CRITÈRES DE RECHERCHES</span></div> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">INFOS SUR LE SITE</span></div> 
       </div> 
       <div class="line-separator div-inline pull-right"></div> 
      </div> 

И скрипку:

http://jsfiddle.net/4sfkc/1/

.label-ombrage { 
    width: 60px; 
    height: 256px; 
    display: inline-block; 
    background-color:#cbcbcb; 
} 

.widget-title { 
    color: #659900; /* text color */ 
    font-family: "Dosis"; 
    font-size: 1.5em; 
    font-weight: bold; 
} 
h5 { 
    padding-left: 30px; 
} 
.bottom-buffer-medium { 
    margin-bottom: 30px; 
} 
.div-inline { 
    display: inline-block; 
} 
.line-separator { 
    width: 1px; 
    height: 256px; 
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMjM2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2NiY2JjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIyMzYiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);*/ /* gradient overlay */ 
    background-image: -moz-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: -o-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
} 
.border-bottom { 
    border-bottom: #cbcbcb 1px solid; 
} 
.margin-bottom-ligh { 
    margin-bottom: 10px; 
    padding-bottom: 10px; 
} 
.margin-bottom-null { 
    margin-bottom: 0; 
} 
.link-utility { 
    color: #999; /* text color */ 
    font-family: "Dosis"; 
    font-size: 14px; 
    margin-left: 15px; 
} 
.choice-search-item { 
    color: #999; /* text color */ 
    font-family: "Dosis"; 
    font-size: 22px; 
    font-weight: bold; 
} 
.bullet-img { 
    height: 31px; 
    background: url(../Content/recherche_bullet.png) 0 31px !important; 
} 
.active-bullet .bullet-img { 
    height: 31px; 
    background: url(../Content/recherche_bullet.png) 0 0 !important; 
} 

Что я ищу, чтобы позиционировать DIV с содержанием «Вос critères де отборный. .. "сверху, div class =" div-inline "в верхнем коде.

Я использую Bootstrap 3.

Answer 1

Добавить vertical-align: top; на .div-inline