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

Question

我试图将文本和图像居中放置在两列中。 但是，我尝试了所有方法，但无法将 position 放入一行的垂直中间。

      <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

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

希望这会帮助你。

Answer 3

（使用 Bootstrap 5）我有一个按钮，里面有一个图像 + 文本。

问题是我的情况，我在图像上使用了float-end - 这导致文本表现得像图像不会扩展按钮的高度，因此文本是垂直对齐的，但不是与图像对齐，而是与按钮对齐。

删除float-end使所有子元素垂直对齐。