前のクラスのdivでテキストの配置に苦労している

Question

これは少し奇妙かもしれませんが、私は図表で作業しましたが、すべてのものが表示されていましたが、下の凡例に表示されますあなたが素早くそのすべてがOKかどうかを確認することができれば正方形に関するテキスト、それはまたクールだろう。

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

.square::before作品のために、以下のCSSを追加：

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

プレビュー

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

Answer 2

迅速な解決をフレキシボックスCSSを使用することでしょう。あなたの伝説<div>display: flexとを確認し、垂直、それは同様に、align-items: centerを使用してセンタリングする：

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

これは常に真ん中にあなたの伝説とテキストを維持します。

Codepenをご覧ください。

希望すると便利です。