skip to Main Content

I’m having trouble trying to vertically center a button in a the body of a panel. I have tried a bunch of css suggestions on stack overflow and the button will still not move. I want the button to be centered next to the image.

enter image description here

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

3

Answers


  1. try

    .panel-body { display: flex; align-items: center; }
    
    Login or Signup to reply.
  2. You can try CSS Flexbox. Make your .panel-body a flex container use flex’s center properties.

    Have a look at the snippet below:

    .panel-body {
      display: flex;
      justify-content: center; /* Horizontally centers the content */
      align-items: center; /* Vertically centers the content */
    }
    <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>

    Hope this helps!

    Login or Signup to reply.
  3. Try it:-

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

    for just horizontal alignment use either

    button{
        margin: 0 auto;
    }
    

    or

    div{
        text-align:center;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search