CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfrontend
kartikeykant18
kartikeykant18

Reputation: 1811

vertical-align:middle doesn't work in Bootstrap button

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?

Upvotes: 1

Views: 2971

Answers (4)

Jette
Jette

Reputation: 2609

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.

Upvotes: 1

Ruan Arag&#227;o
Ruan Arag&#227;o

Reputation: 56

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>

Upvotes: 0

Saliel Irizarry
Saliel Irizarry

Reputation: 62

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>

Upvotes: 1

jmag
jmag

Reputation: 826

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

Upvotes: 0

Related Questions