垂直对齐Bootstrap中的标题与不同的字体大小

据我所知，在这个问题上有大量的帖子，但他们都没有为我工作。如何垂直对齐不同字体的标题？我试过垂直对齐：底部，但没有为我工作。垂直对齐Bootstrap中的标题与不同的字体大小

<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元素，h1可能只是有边缘顶或什么的。 – 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

谢谢，这似乎工作！ –

垂直对齐Bootstrap中的标题与不同的字体大小

回答

相关问题