在中間垂直對齊圖像和文本？

我試圖居中文本和圖像的兩列。但是，我嘗試了一切，但是我無法設法在一個.row的垂直中間位置上。在中間垂直對齊圖像和文本？

 <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中間文本和圖像對齊我想實現圖像中顯示的結果。

來源

2017-03-02 NitinD

所以要對齊文本圖像旁邊垂直方向的中間？ –

@lakshmankambam我已經添加了一張圖片，它可以讓你更明白地理解。 – NitinD

退房小提琴，讓我知道https://jsfiddle.net/klakshman318/fsvwp61h/3/ –

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>

來源

2017-03-02 03:31:58

在你的情況下，它是工作，但不是在我的情況。這裏的問題是，當我給圖像的高度和寬度，然後它堅持頂部。我試着給垂直對齊：中間;但圖像不動。與文本一樣。我需要指定填充以使其位於中心。 – NitinD

使jsfiddle併發送給我鏈接聊天..我會看看它。 –

檢查這兩個小提琴.. http://jsfiddle.net/klakshman318/2zaty6k1/1/ –

可以利用Flexbox，就在這種情況，這是最好的使用

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

希望這會幫助你。

來源

2017-03-02 07:07:36 Abinthaha

你可以分享一個工作jsfiddle，因爲我試過以上它沒有爲我工作。 – NitinD

[JsFiddle]（https://jsfiddle.net/abinthaha/tmtLsug0/） – Abinthaha

在中間垂直對齊圖像和文本？

回答

相關問題