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
The margin-top: 20px; in class h3 pushes it down. Try troubleshooting it using F12 tools.
You are using
<h3>
inside<button>
, is not “correct”, remove<h3>
and add “font-size: 24px;
” in the “.btn
” class.Just use a
margin:0 auto
on your h3 tags.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:
If you are still stuck with Bootstrap 3, you can create your own class:
CSS:
HTML
Note that you need to remove margin from the h3 tags i both cases.