Vertical Ausrichtung von Überschriften in Bootstrap mit verschiedenen Schriftgrößen

Ich verstehe, es gibt eine Tonne von Beiträgen zu diesem Thema, aber keiner von ihnen arbeitete für mich. Wie richte ich Überschriften mit unterschiedlichen Schriftgrößen vertikal aus? Ich habe versucht, vertikal auszurichten: unten, hat aber nicht für mich gearbeitet.Vertical Ausrichtung von Überschriften in Bootstrap mit verschiedenen Schriftgrößen

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

Quelle

2017-03-01 Zack Guetta

werfen Sie einen Blick auf Ihren Inspektor in Ihrem Browser auf die h1, h2 Elemente, h1 hat wahrscheinlich nur Rand oben oder so etwas. – Christophvh

Sie könnten css styling wie eine Tischzelle aussehen – Toxide82

Sie können auch einfach in einzelnem H1-Tag schreiben und innerhalb dieser Tags Verwendung Spanne. Siehe unten Code, kann es Ihnen helfen .....

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

Quelle

2017-03-01 11:54:43 KiranPurbey

Dies funktionierte auch perfekt, danke guten Herrn! –

Willkommen .... fröhliche Programmierung. – KiranPurbey

Verwenden line-height, margin oder padding

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

Quelle

2017-03-01 11:46:50

Das Problem ist, dass die Spalten Blockelement sind so vertical-align wird nicht funktionieren.

Eine Lösung ist, den oberen Rand auf der kleineren Überschrift nach Bedarf einzustellen:

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

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

Quelle

2017-03-01 11:51:43 ZimSystem

Danke, das schien zu arbeiten! –

Vertical Ausrichtung von Überschriften in Bootstrap mit verschiedenen Schriftgrößen

Antwort

Verwandte Themen