CODEWITHSUNDEEP
csshtml
Tim C
Tim C

Reputation: 5714

aligning elements center in div, not centering

I have the following

enter image description here

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 enter image description here

.tNames{  
    text-align: center;
}

Upvotes: 1

Views: 107

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

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>

Upvotes: 1

JHS
JHS

Reputation: 1428

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>

Upvotes: 1

Related Questions