ブートストラップの見出しを異なるフォントサイズで垂直に整列させる

私はこの件に関してたくさんの投稿があることを理解していますが、どれも私のために働いていません。見出しを縦に異なるフォントサイズに揃えるにはどうすればよいですか？私は垂直に揃えてみました：底は、私のために働いていませんでした。ブートストラップの見出しを異なるフォントサイズで垂直に整列させる

<header> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-7"> 
       <h2 id="h1">Computer Science and Engineering</h2> 
      </div> 
      <div class="col-md-5"> 
       <h4 id="h2">"Ss. Cyril & Methodius" University - Skopje</h4> 
      </div> 
     </div> 
    </div> 
</header> 


<style> 
    nav { border-radius: 0 !important;} 
    #h1, #h2 { vertical-align: bottom; !important;} 
</style>

出典

2017-03-01 Zack Guetta

h1、h2要素でブラウザのインスペクタを見て、おそらくちょうどマージントップまたは何かがあります。 – Christophvh

あなたは表のセルのようなスタイルにCSSのスタイリングを見ることができました – Toxide82

あなたも、単に一つのH1タグの中に、その使用のspanタグの内側にそれを書くことができます。下のコードを参照してください.....

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <title> Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/font-awesome-animation.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     nav { 
     border-radius: 0 !important; 
     } 

     #h1 { 
     vertical-align: bottom !important; 
     } 

    </style> 
    </head> 

    <body> 
    <header> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
      <h2 id="h1"> 
       Computer Science and Engineering 
       <span style="font-size: 20px;color:gray;"> 
       &nbsp;&nbsp;"Ss. Cyril & Methodius" University - Skopje 
       </span> 
      </h2> 
      </div> 
     </div> 
    </header> 
    </body> 

</html>

出典

2017-03-01 11:54:43 KiranPurbey

これは完璧にうまくいった、ありがとう、良いサー！ –

ようこそ....幸せなコーディング。 – KiranPurbey

使用行の高さ、マージンやパディング

#h2 { line-height:XXpx;} 
#h2 { margin:XXpx XXpx;} 
#h2 { padding:XXpx;}

出典

2017-03-01 11:46:50

問題はvertical-alignが動作しませんので、列はブロック要素であるということです。

一つの解決策は、必要に応じて小さな見出しを上マージンを調整することです：

#h2 { 
    margin-bottom: 0px; 
    margin-top: 35px; 
}

http://www.codeply.com/go/jrexdrKpOC

出典

2017-03-01 11:51:43 ZimSystem

ありがとう、これは動作するようでした！ –

ブートストラップの見出しを異なるフォントサイズで垂直に整列させる

答えて

関連する問題