Align an image and text vertically in the middle? - html

Question

I am trying to center the text and an image in two columns. But, I tried everything but I could not manage to bring then in the vertical middle position of a .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>
Can anyone help me with the css to align the text and the image in the middle I want to achieve the results shown in the image.

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

You can make use of the Flexbox in this kind of situations, which is the best for use
<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;
}
Hope this will help you.

Answer 3

( using Bootstrap 5 ) I have a button with an Image + text inside it.
Issue was in my case, I used a float-end on the image - which caused the text to behave like the image doesn't expand the button's height and therefore the text was vertical aligned but not to the image but rather to the button.
Removing the float-end made all child-elements vertical aligned.