vertical-align:middle 在 Bootstrap 按钮中不起作用

Question

我无法使用 vertical alignment of text and icon in bootstrap button

中使用的 vertical-align:middle 样式垂直对齐按钮内的文本

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

这是我的 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>

代码片段和代码笔中的结果也不同。怎么会这样？

Answer 1

margin-top:20px;在 class h3 中将其向下推。尝试使用 F12 工具对其进行故障排除。

Answer 2

您在 <button> 中使用 <h3>，不是 "correct"，删除 <h3> 并在“[=16=”中添加“font-size: 24px;” ]" 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>

Answer 3

只需在您的 h3 标签上使用 margin:0 auto。

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

Answer 4

vertical-align:middle 也不适合我。我最终使用了 flex。

在 Bootstrap 4 中，这只是使用 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>

如果您仍然坚持使用 Bootstrap 3，您可以创建自己的 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>

请注意，在这两种情况下，您都需要从 h3 标签中删除边距。

vertical-align:middle 在 Bootstrap 按钮中不起作用

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

html

css

frontend

twitter-bootstrap