对齐元素在div中居中，而不居中

Question

I have the following

I need to get the team names and points centered, under team jerseys. I have been researching and trying, and tweaking but it just wont get centered.

In my latest attempt I tried help in this post How to align an element always center in div without giving width to its parent div? with display:inline block to no success:

.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>';

WITHOUT FLOAT

.tNames{  
    text-align: center;
}

Answer 1

This is the type of CSS that I normally use for centering things:

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

Hope that helps. The comments are correct, using float: left; will of course make the content go to the left rather than be centered. Here's a rough version that I made by removing the PHP from the code you posted:

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

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

Answer 2

Your problem is caused by the float:left; which is forcing them to be aligned to the left of the div.

To align them in center you could simply use display:table; with .tNames and display:table-row; with .tNames labels which represent the team names, here's what you need:

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

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