CODEWITHSUNDEEP
htmlcss
Dorbagna
Dorbagna

Reputation: 315

Display a span to center in table td

I have simple counter circle but I can't display span's in center.I use code below,but only first td cell display successfully.I just did same thing 2. and 3. but this time 2. and 3. cell's get position under first cell.

<td style="width: 153.333px;display: flex;justify-content: center;">

This is full of code which I use in html ?

<div class="kazandir">

<div class="kazanhazir">
<table style="height: 137px;" width="100%">
<tbody>
<tr>
<td style="width: 153.333px; text-align: center; height:100px;" colspan="3"><p class="zommbaslik">Kazandırdık</p></td>
</tr>
<tr>
<td style="width: 153.333px;">
<div id="shivakazan"><span class="countkazan">30</span></div>
</td>
<td style="width: 153.333px;">
<div id="shivakazan"><span class="countkazan">30</span></div>
</td>
<td style="width: 153.333px;">
<div id="shivakazan"><span class="countkazan">30</span></div>
</td>
</tr>
<tr>
<td style="width: 153.333px;">Kazanan      </td>
<td style="width: 153.333px;">Toplam</td>
<td style="width: 153.333px;">Kaybeden</td>
</tr>
</tbody>
</table>
</div>


</div>



.kazandir{

background: linear-gradient(45deg, #11E960 0%, #BEE914 100%);
width: 100%;
height: 250px;
display: flex;
justify-content: center;    
}

.kazanhazir{
    color: white;
font-weight: bold;
align-self: center;
}


#shivakazan
{
  width: 120px;
height: 120px;
    background: #FF6F6F;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
  float:left;
  margin:5px;
}
.countkazan
{
  line-height: 115px;
  color:white;
  font-size:25px;
}

Fiddle here.

Upvotes: 1

Views: 1355

Answers (2)

R. Lorenzini
R. Lorenzini

Reputation: 33

You need to set a margin-left and margin-right inside your css #shivakazan. Your div is starting on the left of the table column automatically, so telling the red circle you created to margin-left approximately 16.6665px ((155.333-120)/2) for exact number) will center the picture. The text is already centered inside of the column.

#shivakazan{
margin-left: 16.6665px}

You can keep your top and bottom margin as is if you wish, but you may need to change the margin-right to be the same as margin-left.

#shivakazan{
margin-top: 5px;
margin-right: 16.6665px;
margin-left: 16.6665px;
margin-top: 5px}

This is just the fastest way I centered the red circles.

Extra note: for each td element you redefine the width:153.333, which isn't necessary. You defined it at the start, so the rest of the table is assuming the width is 153.333.

I hope this helped and gave you at least an idea for moving forward.

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

There are a few problems here

  1. why use table ? when you can use a flexbox-layout from the start
  2. never use float:left/right for layout. It gets the elements out of the normal document flow = unwanted results
  3. if you use table do not change it's or it's children default display property. So do not change td from display: table-cell to display: flex. Again, it might cause unwanted results
  4. do not use inline styles. Use your css stylesheet for styling
  5. Last but most important : DO NOT use duplicate id's in your HTML structure. shivakazan is used more than once. id must be unique. Again, it can cause unwanted results. Use class instead.

With your current code you can remove the float:left from the shivakazan ( now changed to class ) div and use margin:5px auto . You can also add text-align:center to the td

.kazandir {
  background: linear-gradient(45deg, #11E960 0%, #BEE914 100%);
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
}

.kazanhazir {
  color: white;
  font-weight: bold;
  align-self: center;
}

.shivakazan {
  width: 120px;
  height: 120px;
  background: #FF6F6F;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
  
  margin: 5px auto;
  text-align: center;
}

.countkazan {
  line-height: 115px;
  color: white;
  font-size: 25px;
  text-align: center;
}

td {
  text-align: center;
}
<div class="kazandir">

  <div class="kazanhazir">
    <table style="height: 137px;" width="100%">
      <tbody>
        <tr>
          <td style="width: 153.333px;" colspan="3">
            <p class="zommbaslik">Kazandırdık</p>
          </td>
        </tr>
        <tr>
          <td style="width: 153.333px;">
            <div class="shivakazan"><span class="countkazan">30</span></div>
          </td>
          <td style="width: 153.333px;">
            <div class="shivakazan"><span class="countkazan">30</span></div>
          </td>
          <td style="width: 153.333px;">
            <div class="shivakazan"><span class="countkazan">30</span></div>
          </td>
        </tr>
        <tr>
          <td style="width: 153.333px; text-align: center;">Kazanan </td>
          <td style="width: 153.333px; text-align: center;">Toplam</td>
          <td style="width: 153.333px; text-align: center;">Kaybeden</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>

Upvotes: 1

Related Questions