如何對齊此文本？

Question

我試圖使文字是這樣的：

here goes a nice image. 
some text | a small ico 

我也wanto到圖像下面的文字，加上分離器和圖標必須是大小相同的形象。

目前，它看起來像這樣：

here goes a nice image. 
some text 
| 
a small ico 

我不知道他們是低於對方的，因爲我使用COL-MD *的行內。我該如何解決？

這裏是我的代碼：

HTML：

<div class="row"> 
    <div class="col-md-3"> 
    <img src="http://www.foranyinfo.com/wp-content/uploads/2015/11/motorbike_black_yamaha_r6_74416_3840x2400.jpg" style="width:128;height:128px"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <span class="name">A Beutiful star</span> 
     </div> 
     <div class="col-md-4"> 
      <div style="width:32px;height:32px"> 
       <div class="verticalBar"></div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <img src="https://image.freepik.com/free-icon/rate-star-button_318-76714.jpg" style="width:32px; height:32px" /> 
     </div> 
    </div> 
    </div> 

CSS：

.verticalBar { 
    border-left:1px solid green; 
    height:100%; 
} 

Answer 1

您可以使用display:flex到.row，使按您預期的結果。

.row { 
    align-items: center; 
    display: flex; 
} 

Working Fiddle

而在你的提琴添加引導插件。

Answer 2

可以添加以下樣式內部div的，

display:inline-block;