Bootstrap Fußballteam dynamisches Layout

Question

Ich versuche ein Layout zu erstellen, um ein Fantasy League Team anzuzeigen, ursprünglich hatte ich es mit Spielernamen in einer Tabellenansicht, aber ich möchte das zu einer grafischen Darstellung ändern, die ein bisschen wie aussieht Team Aufstellung.

Obwohl ich es ähnlich bekommen kann, was ich will, bin ich nicht sehr erfahren im Schreiben css, die Seite ist in PHP geschrieben, also denke ich, dass ich ein paar Stile basierend auf wie viele Spieler haben müssen in einer Position und dann verwenden Sie PHP, um diese dynamisch zu tauschen, es sei denn, es gibt einen besseren Weg.

Meine Frage ist, wie gehe ich über die zentralen Positionen wie ich mit der Torwartposition und inline bekommen habe, benutze ich float: left, um die Positionen inline zu bekommen, aber kann sie nicht zentral damit bekommen.

.section-heading{ 
 
    border-bottom: 1px solid #c8c8c8; 
 
} 
 
.section-heading-text{ 
 
    text-align: center; 
 
} 
 

 
.section-content{ 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009b29+0,009b29+20,61bf7a+20,61bf7a+40,009b29+40,009b29+60,61bf7a+60,61bf7a+80,009b29+80 */ 
 
    background: #009b29; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #009b29 0%, #009b29 20%, #61bf7a 20%, #61bf7a 40%, #009b29 40%, #009b29 60%, #61bf7a 60%, #61bf7a 80%, #009b29 80%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(left, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to right, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009b29', endColorstr='#009b29',GradientType=1); /* IE6-9 */ 
 

 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    height: 300px; 
 
} 
 
.gk{ 
 
    text-align: center; 
 
} 
 
.kit-image{ 
 
    height: 40px; 
 
    width: 35px; 
 
} 
 
.defender{ 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-top: 10px; 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="section-box"> 
 
    <div class="section-heading"> 
 
    <h2 class="section-heading-text">Team Name</h2> 
 
    </div> 
 
    <div class="section-content"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="gk"> 
 
      <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
 
      <div> 
 
      Goal keeper 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Dies ist mein Lösungsvorschlag, dass die Schaffung von col zentrierten und Reihe zentrierten CSS-Klassen, und wendet sie sieht wie folgt aus:

css:

.row-centered { 
    text-align:center; 
} 


.col-centered { 
    display:inline-block; 
    float:none; 
} 

html:

<div class="section-box"> 
    <div class="section-heading"> 
    <h2 class="section-heading-text">Team Name</h2> 
    </div> 
    <div class="section-content"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="gk"> 
      <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
      <div> 
      Goal keeper 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row row-centered"> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 2

Sie können dies mithilfe von Bootstrap-Spalten nur tun, und zum ersten Offset zugibt und anschließend wurden zu allen Spalten text-align: Attribut-Center.

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="gk"> 
     <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
     <div> 
     Goal keeper 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="defender col-sm-1 col-sm-offset-4"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
</div> 

Und in CSS:

.defender{ 
    text-align: center; 
}