skip to Main Content

I am not able to align the text inside the buttons vertically using the vertical-align:middle style as used in vertical alignment of text and icon in bootstrap button

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="page-header">
        <div class="row">
            <div class ="col-md-3">
                <h3 class="text-center" id="title">Kartikey</h3>     
            </div>
            <div class ="col-md-1 col-md-offset-3" >
                <button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>         
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
            </div>
            <div class="col-md-3">
            </div>
        </div>
    </div>
</body>

Here’s my code :

http://codepen.io/kartikeykant/pen/VPeWYN

.page-header{
  height: 100px;
  background-color: rgb(112, 137, 142);
  margin-top: 0px;
}

#title{
  font-size:400%;
  color: white;
}

.btn{
  margin-top:24px;
  margin-right:50px;
  margin-left:50px;
  width:110px;
  height:55px;  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="page-header">
    <div class="row">
      <div class ="col-md-3">
        <h3 class="text-center" id="title">Kartikey</h3>     
      </div>
      <div class ="col-md-1 col-md-offset-3" >
      <button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>         
      </div>
      <div class="col-md-1">
        <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
      </div>
      <div class="col-md-1">
        <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
      </div>
      <div class="col-md-3">
      </div>
    </div>
    
      
    
  </div>
</body>

Also the result in the code snipppet and codepen are different. How is it so?

4

Answers


  1. The margin-top: 20px; in class h3 pushes it down. Try troubleshooting it using F12 tools.

    Login or Signup to reply.
  2. You are using <h3> inside <button>, is not “correct”, remove <h3> and add “font-size: 24px;” in the “.btn” class.

    .page-header{
      height: 100px;
      background-color: rgb(112, 137, 142);
      margin-top: 0px;
    }
    
    #title{
      font-size:400%;
      color: white;
    }
    
    .btn {
      margin-top:24px;
      margin-right:50px;
      margin-left:50px;
      width:110px;
      height:55px;  
      font-size: 24px;
    }
    <head>
      
    </head>
    <body>
      <div class="page-header">
        <div class="row">
          <div class ="col-md-3">
            <h3 class="text-center" id="title">Kartikey</h3>     
          </div>
          <div class ="col-md-1 col-md-offset-4" >
          <button type="button" class="btn btn-default" >About</button>         
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-default">Portfolio</button>
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-default">Contact</button>
          </div>
          <div class="col-md-2">
          </div>
        </div>   
      </div>
    </body>
    Login or Signup to reply.
  3. Just use a margin:0 auto on your h3 tags.

    .page-header{
      height: 100px;
      background-color: rgb(112, 137, 142);
      margin-top: 0px;
    }
    
    #title{
      font-size:400%;
      color: white;
    }
    
    .btn{
      margin-top:24px;
      margin-right:50px;
      margin-left:50px;
      width:110px;
      height:55px;  
    }
    .btn h3{
      margin:0 auto;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <body>
      <div class="page-header">
        <div class="row">
          <div class ="col-md-3">
            <h3 class="text-center" id="title">Kartikey</h3>     
          </div>
          <div class ="col-md-1 col-md-offset-3" >
          <button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>         
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
          </div>
          <div class="col-md-3">
          </div>
        </div>
        
          
        
      </div>
    </body>
    Login or Signup to reply.
  4. vertical-align:middle didn’t work for me either. I ended up using flex.

    In Bootstrap 4 this is just a matter of using the flex classes:

    <div class="col-md-1">
      <button type="button" class="btn btn-default d-flex align-items-middle justify-content-center">
        <h3 class="m-0">Contact</h3>
      </button>
    </div>
    

    If you are still stuck with Bootstrap 3, you can create your own class:

    CSS:

    .valign-content {
      display:flex;
      align-items: center;
      justify-content: center;
    }
    
    .valign-content>h3 {
      margin:0;
    }
    

    HTML

    <div class="col-md-1">
      <button type="button" class="btn btn-default valign-content">
        <h3>Contact</h3>
      </button>
    </div>
    

    Note that you need to remove margin from the h3 tags i both cases.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search