イメージとテキストを真ん中に垂直に整列させますか？

Question

私はテキストとイメージを2つの列の中央に配置しようとしています。しかし、私はすべてを試しましたが、私はそれを垂直方向の中間位置に持っていくことはできませんでした。

 <div className="hidden-md"> 
     <div className="row navbar"> 
      <div className="col-xs-2 col-sm-4 text-center"> 
      <image src="../resources/back_button.png" /> 
      </div> 
      <div className="col-xs-6 col-sm-4 text-center"> 
      <span className="custom-input">Filters</span> 
      </div> 
     </div> 
    </div> 

誰も私がイメージに示すような結果を達成したい中央にテキストや画像を配置するCSSで私を助けることができます。

Answer 1

JSFIDDLE

.vertical-align{ 
 
    vertical-align: middle; 
 
} 
 
img{ 
 
    border:3px solid #2d2d2d; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div className="hidden-md"> 
 
     <div className="row navbar"> 
 
      <div className="col-xs-2 col-sm-4 text-center"> 
 
      <img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" /> 
 
      <span className="custom-input vertical-align">Filters</span> 
 
      </div> 
 
     </div>

Answer 2

あなたは使用のために最善である状況のこの種ではフレキシボックスを利用することができます

<div className="hidden-md"> 
    <div className="row navbar"> 
     <div className="col-xs-2 col-sm-4 text-center"> 
     <image src="../resources/back_button.png" /> 
     </div> 
     <div className="col-xs-6 col-sm-4 text-center"> 
     <span className="custom-input">Filters</span> 
     </div> 
    </div> 
</div> 

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

これがあなたを助けてくれることを願っています。