vertikale Zentren von Symbol und Text in .row

im stecken wieder mit "Basics", trotzdem ausrichten, ich habe Probleme, dieses Beispiel zu machen:vertikale Zentren von Symbol und Text in .row

Basicly Ich mag Symbol und "Feature 1" oben ausgerichtet und zentriert, wie auf dem Bild zu sehen (die cyanfarbenen Linien) und dann unter ihnen ein zufälliger Absatz.

<body> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="top-align text-center"> 
      <i class="fa fa-paper-plane-o"></i> 
      <h3>We're Creative</h3>    
      </div> 
      <p class="text-center">Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet</p> 
     </div> 
    </div> 
</div>  


</body>

CSS3

.top-align{ 

display:inline; 

}

Also, meine Idee hier war Symbol und "Feature 1" Absatz sein "inline" so habe ich benutzerdefinierte CSS und separaten div-Tag für diese 2 Dinge (Symbol zu machen und Absatz), aber leider hier es wird nicht funktionieren, Live-Version ist, wenn jemand interessiert

http://i1cevic.com

Quelle

2016-03-18 bertone_in

vertical-align: middle + Inline-Block für beide icone und Titel;) –

ty, es funktioniert einfach toll! –

Ihre Wrapper div braucht keine Anzeige: inline. Ein Inline-Element wird so dargestellt, als wäre es ein Buchstabe in einem Wort - jedes Zeichen ist ein Inline-Element. A <span> wird standardmäßig angezeigt: Inline - es belegt den nächsten verfügbaren Platz in der Zeile.

Sobald der Wrapper div.top-align display: inline entfernt hat, geben Sie der h3 eine Anzeigeeigenschaft von Inline oder Inline-Block. Beides funktioniert. Dies ermöglicht es dem Symbol und h3, sich wie zwei benachbarte Wörter zu verhalten, und sie reagieren auf den Text-align: center, der vom Wrapper div angewendet wird.

Noch besser, können Sie dies ohne eine Wrapper div um das Symbol + h3 erreichen. Das Symbol wird standardmäßig auf Inline-Block angezeigt. Setzen Sie die Spanne dieses Symbols in die h3 und es wird immer als eine Einheit gerendert, genau wie das Symbol ein Wort in der h3 war. Da das Symbol in einen Bereich eingeschlossen ist, können Sie es bei Bedarf auch individuell ausrichten. Hier ist eine Geige darstellt, wie: (. I mit Ihrem Code und kommentiert aus gestartet, was nicht mehr gilt, so können Sie den Fortschritt sehen) Making your icon an integral part of your heading

Quelle

2016-03-19 00:05:16

ich bemerkt, dass Sie Bootstrap und Schrift Ehrfürchtig verwenden, so meine Geige widerspiegelt, dass .

https://jsfiddle.net/Vuice/Ljkoatog/

<body> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="text-center"> 
      <i class="fa fa-paper-plane-o"></i> 
      <h3 style="display:inline;">We're Creative</h3> 
     </div> 
     <p class="text-center">Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet<br> 
      Lorem ipsum dolor sit amet</p> 
     </div> 
    </div> 
    </div> 
</body>

Quelle

2016-03-19 01:52:12 Vuice

vertikale Zentren von Symbol und Text in .row

Antwort

Verwandte Themen