垂直对齐：中间在引导按钮中不起作用答案

【问题标题】：vertical-align:middle doesn't work in Bootstrap button垂直对齐：中间在引导按钮中不起作用
【发布时间】：2017-05-26 17:52:24
【问题描述】：

我无法使用 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>

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

【问题讨论】：

标签： html css twitter-bootstrap frontend

【解决方案1】：

上边距：20px；在 h3 类中将其向下推。尝试使用 F12 工具对其进行故障排除。

【讨论】：

【解决方案2】：

您在<button> 中使用<h3>，不“正确”，删除<h3> 并在“.btn”类中添加“font-size: 24px;”。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

在 Bootstrap 4 中，这只是使用 flex 类的问题：

<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，您可以创建自己的类：

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 标签中删除边距。

【讨论】：