Kämpfen mit Text Positionierung in einem Div mit einer vor Klasse

Question

Es könnte ein bisschen seltsam sein, ich arbeitete an einem Diagramm/Diagramm, ich schaffte es, alles wie gewünscht angezeigt zu bekommen, aber in der Legende an der Unterseite kann ich nicht zentrieren Text in Bezug auf die Quadrate, wäre es auch cool, wenn Sie schnell überprüfen könnten, ob alles OK ist.

CodePen: http://codepen.io/HendrikEng/pen/pNQKbp

CSS:

$main-color: #004284; 
$main-light: #6FB9E8; 
$main-dark: #008DE5; 
$main-black: #041B15; 
$main-grey: #BEBBBB; 
$main-bg: #fff; 

//arrows 

.arrow { 
    position: relative; 
    background: $main-grey; 
    width: 200px; 
    height: 60px; 
    padding-left: 30px; 
    margin: auto; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
    color: $main-black; 
} 

.arrow:after { 
    border: solid transparent; 
    content: " "; 
    position: absolute; 
    border-bottom-color: $main-bg; 
    border-width: 30px; 
    left: 0; 
    top: 0; 
    transform: rotate(90deg); 
} 

.arrow:before { 
    border: solid transparent; 
    content: " "; 
    position: absolute; 
    border-bottom-color: $main-grey; 
    border-width: 30px; 
    left: 200px; 
    top: 0; 
    transform: rotate(90deg); 
} 
// Square 
.square:before { 
    content: ""; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    margin-right: 10px; 
} 
.lone:before { 
    background: $main-light ; 
} 
.ltwo:before { 
    background: $main-dark ; 
} 
.lthree:before { 
    background: $main-color ; 
} 
.square { 
    color: $main-black; 
} 


// 5 columns 
.col-md-15, 
.col-md-20, 
.col-md-40, 
.col-md-50 { 
    position: relative; 
    min-height: 60px; 
    margin: auto; 
    padding: 10px; 
    color: $main-bg; 
} 

.col-md-15 { 
    width: 20%; 
    float: left; 
} 

.col-md-20 { 
    width: 40%; 
    float: left; 
} 

.col-md-40 { 
    width: 80%; 
    float: left; 
} 

.col-md-50 { 
    width: 100%; 
    float: left; 
} 

.main, 
.light, 
.dark, 
.white { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border-right: 15px solid $main-bg; 
    border-left: 15px solid $main-bg; 
} 

.main { 
    background: $main-color 
} 

.light { 
    background: $main-light 
} 

.dark { 
    background: $main-dark 
} 

.white { 
    background: $main-bg 
} 

.marging-bot { 
    margin-bottom:10px; 
} 

HTML:

<div class="container"> 
    <div class="row marging-bot"> 
    <div class="col-md-15"> 
     <div class="arrow">Kundenanalyse</div> 
    </div> 
    <div class="col-md-15"> 
     <div class="arrow">Finanzierungs-<br>analyse</div> 
    </div> 
    <div class="col-md-15"> 
     <div class="arrow">Risikoanalyse</div> 
    </div> 
    <div class="col-md-15"> 
     <div class="arrow">Entscheidung/<br>Abschluss</div> 
    </div> 
    <div class="col-md-15"> 
     <div class="arrow">Bestand</div> 
    </div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-20 light"> 
     Modul 01 
     <br> Finanzierungsstrukturen Baufinanzierung 
    </div> 
    <div class="col-md-15 light"> 
     Modul 07 
     <br> Sicherheitenarten 
    </div> 
    <div class="col-md-15 dark"> 
     Modul 10 
     <br> Darlehensvertrag 
    </div> 
    <div class="col-md-15 light"> 
     Modul 14 
     <br> Bestandsgeschäft 
    </div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-15 light"> 
     Modul 02 
     <br> Kreditkarten 
    </div> 
    <div class="col-md-15 dark"> 
     Modul 06 
     <br> Scoring/Rating 
    </div> 
    <div class="col-md-15 light"> 
     Modul 08 
     <br> Grundbuch 
    </div> 
    <div class="col-md-15 light"> 
     Modul 11 
     <br> Legitimationsprüfung 
    </div> 
    <div class="col-md-15 main"> 
     Modul 15 
     <br> Risikokredite 
    </div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-15 light"> 
     Modul 03 
     <br> Bonitätsanalyse 
    </div> 
    <div class="col-md-15 white"></div> 
    <div class="col-md-15 light"> 
     Modul 09 
     <br> Objektwertermittlung 
    </div> 
    <div class="col-md-15 light"> 
     Modul 12 
     <br> Valutierung 
    </div> 
    <div class="col-md-15 main"> 
     Modul 16 
     <br> Sicherheitenverwertung 
    </div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-20 light"> 
     Modul 04 
     <br> Erkennen von Negativmerkmalen 
    </div> 
    <div class="col-md-15 white"></div> 
    <div class="col-md-15 light"> 
     Modul 13 
     <br> Indeckungnahme 
    </div> 
    <div class="col-md-15 white"></div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-40 light"> 
     Modul 05 
     <br> Notwendige Unterlagen 
    </div> 
    <div class="col-md-15 white"></div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-50 light"> 
     Zusatzmodul 
     <br> Aktuelle Rechtsfragen (u.a. EU-Wohnimmobilienkreditrichtlinie) 
    </div> 
    </div> 
    <div class="row marging-bot"> 
    <div class="col-md-5"> 
     <span class="square lone"></span> Inhaltliche Tiefe der Module ist nach Bedarf skalierbar 
    </div> 
    <div class="col-md-3"> 
     <span class="square ltwo"></span> Vermittlung Grundlagenwissen 
    </div> 
    <div class="col-md-3"> 
     <span class="square lthree">Spezial-Module</span> 
    </div> 
    </div> 
</div> 

Answer 1

Wenn Sie folgende CSS für .square::before Werke:

.square::before { 
    margin-top: 10px; 
    margin-bottom: -10px; 
} 

Vorschau

CodePen: http://codepen.io/anon/pen/YpRvey

Answer 2

Eine schnelle Lösung wäre mit CSS Flexbox. Machen Sie Ihre Legende <div>display: flex und vertikal zentriert es align-items: center verwenden, wie:

HTML:

<div class="col-md-5 legend-holder"> 
    <span class="square lone"></span> Inhaltliche Tiefe der Module ist nach Bedarf skalierbar 
</div> 

CSS:

.legend-holder { 
    display: flex; 
    align-items: center; 
} 

.square { 
    display: flex; 
} 

Dies wird immer halten Sie Ihre Legende und Text in der Mitte.

Werfen Sie einen Blick auf die aktualisierte Codepen.

Hoffe, das hilft!