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

＆＃13;

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

＆＃13;

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

＆＃13;

此外，代码snipppet和codepen中的结果也不同。怎么回事？

Answer 1

只需在h3代码上使用.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>

Letter  Number
A       15
A       2212
A       3741
B       251
B       7
B       14201
C       13503
C       97
C       113

Answer 2

保证金最高：20px;在课堂上，h3将其推倒。尝试使用F12工具对其进行故障排除。

Answer 3

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

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

vertical-align：middle在Bootstrap按钮

4 个答案: