在中间垂直对齐图像和文本？

Question

我试图将文本和图像放在两列中心。但是，我尝试了所有的东西，但我无法将其带入.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来对齐文本和中间的图像我希望实现图像中显示的结果。

Answer 1

JSFIDDLE

setUp()

assertEquals()

Answer 2

您可以在这种情况下使用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;
}

希望这会对你有所帮助。