html - 如何在面板中垂直居中按钮？

Question

我在尝试将面板主体中的按钮垂直居中时遇到问题。我已经尝试了一堆关于堆栈溢出的 css 建议，但按钮仍然不会移动。我希望按钮在图像旁边居中。

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <p>Panel Heading</p>
        </div>
        <div class="panel panel-body">
          <div class="col-lg-2 button">
            <button id="fix_button" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-triangle-top"> Fix</span> </button>
          </div>
          <div class="col-lg-offset-3"> <img src="users/1479318868.jpg" class="img-responsive" width="300px"> </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试

.panel-body { display: flex; align-items: center; }