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

我无法使用垂直对齐：中间样式垂直对齐按钮内的文本，该样式用于引导按钮中文本和图标的垂直对齐

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

这是我的代码：

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>

此外，代码截图和代码笔中的结果也不同。怎么会这样？

只需在 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>

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

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

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

相关内容

最新更新

热门标签：