对齐元素以div为中心，而不是居中

Question

我有以下

我需要在球队球衣下以球队的名字和分数为中心。 我一直在研究，尝试和调整，但它不会集中。

在我最近的尝试中，我在这篇帖子中How to align an element always center in div without giving width to its parent div?尝试了帮助，显示：内联阻止没有成功：

.tNames {
    margin-left:0px auto;
    margin-right:0px auto;
    float:left;
}

<div align="center" class="tNames">
<center>
    <label class="blue"><input type="radio" name="picks['.$x.']" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
    <label class="green"><input type="radio" name="picks['.$x.']" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
    <label class="green"><input type="radio" name="picks['.$x.']" value="draw"><span>Draw</span></label><br />
    </center>';

        echo'BY';
        echo'<select name="score[]" id="winScore">';

            echo'<option value="1">1</option>';
            echo'<option value="2">2</option>';
            echo'<option value="3">3</option>';
            echo'<option value="4">4</option>';
            echo'<option value="5">5</option>';
            echo'<option value="6">6</option>';

            echo'</select>';    
            echo'POINTS';
    echo'</div>';

没有FLOAT

.tNames{  
    text-align: center;
}

Answer 1

这是我通常用于集中事物的CSS类型：

.center{
    display: block;
    margin: 0 auto;
    width: 20%; /*this can be whatever the width of each team name*/
    text-align: center;
}

希望有所帮助。评论是正确的，使用float: left;当然会使内容向左移动而不是居中。这是我通过从您发布的代码中删除PHP而制作的粗略版本：

＆＃13;

＆＃13;

.tNames>* {
    margin: 0 auto;
    display: block;
    width: 20%;
    text-align: center;
}

＆＃13;

<div class="tNames">
    <label class="blue"><input type="radio" name="picks['.$x.']" value="'.$row['team1'].'"><span>'.$team1.'</span></label>
    <label class="green"><input type="radio" name="picks['.$x.']" value="'.$row['team2'].'"><span>'.$team2.'</span></label>
    <label class="green"><input type="radio" name="picks['.$x.']" value="draw"><span>Draw</span></label>
  <select name="score[]" id="winScore">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的问题是由float:left;引起的，它迫使它们与div的左侧对齐。

要将它们对齐在中心，您只需使用display:table;与.tNames和display:table-row;与.tNames labels代表团队名称，这就是您需要的：

＆＃13;

＆＃13;

.tNames {
  margin-left: 0px auto;
  margin-right: 0px auto;
  dsiplay: table;
}
.tNames label {
  display: table-row;
}

＆＃13;

<div align="center" class="tNames">

  <label class="blue">
    <input type="radio" name="picks['.$x.']" value="'.$row['team1'].'"><span>'.$team1.'</span>
  </label>
  <br />
  <label class="green">
    <input type="radio" name="picks['.$x.']" value="'.$row['team2'].'"><span>'.$team2.'</span>
  </label>
  <br />
  <label class="green">
    <input type="radio" name="picks['.$x.']" value="draw"><span>Draw</span>
  </label>
  <br />By
  <select name="score[]" id="winScore">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>points.
</div>

＆＃13;

＆＃13;

＆＃13;