垂直整列：真ん中のは、私は垂直整列を使用して縦にボタン内のテキストを整列させることはできませんよブートストラップボタン

では動作しません：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>

に使用されるように真ん中のスタイルがここに私の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>

コードsnipppetとcodepenの結果も異なります。それはどうですか？

出典

2017-01-11 kartikeykant18

ちょうどあなたの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>

出典

2017-01-11 19:51:30

マージントップ：20px;クラスh3でそれをプッシュダウンします。 F12ツールを使用してトラブルシューティングを試みてください。あなたは<button>内部<h3>を使用している

出典

2017-01-11 19:50:59 jmag

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

出典

2017-01-11 19:51:24

垂直整列：真ん中のは、私は垂直整列を使用して縦にボタン内のテキストを整列させることはできませんよブートストラップボタン

答えて

関連する問題