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

Answer 2

您可以尝试 CSS Flexbox 。使.panel-body弹性容器使用flex的中心属性。

请看下面的代码段：

＆＃13;

.panel-body {
  display: flex;
  justify-content: center; /* Horizontally centers the content */
  align-items: center; /* Vertically centers the content */
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="">
                        <img src="http://placehold.it/300x300" class="img-responsive" width="300px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

希望这有帮助！

Answer 3

试一试： -

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

仅用于水平对齐

button{
    margin: 0 auto;
}

或

div{
    text-align:center;
}

如何垂直居中面板中的按钮？

3 个答案: