<分区>
我正在尝试设置一个布局来显示梦幻联盟球队，最初我在表格 View 中使用球员姓名，但我想将其更改为看起来有点像球队阵容的图形表示。
虽然我可以得到与我想要的相似的东西，但我在编写 css 方面不是很有经验，该网站是用 PHP 编写的，所以我认为我必须根据有多少玩家来设计一些样式一个位置，然后使用 php 动态交换这些，除非有更好的方法。
我的问题是如何像我对守门员位置所做的那样使位置居中并使它们内联，我正在使用 float: left 使位置内联但无法获得他们对此很重要。
.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>最佳答案
您只需使用 bootstrap 列并向第一个列添加偏移量，然后向所有列添加 text-align: 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>
在 CSS 中:
.defender{
text-align: center;
}
关于php - Bootstrap 足球队动态布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42188058/