在表td中显示以中心为单位的范围

Question

我有简单的计数器圈，但我不能在中心显示跨度。我使用下面的代码，但只有第一个td单元格显示成功。我只做同样的事情2.和3.但这次是2.和3.单元格获得位置第一个细胞。

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

这是我在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在这里。

Answer 1

这里有一些问题

1. 为什么用桌子？什么时候可以从一开始就使用flexbox-layout
2. 永远不要使用float:left/right进行布局。它从正常文档流中获取元素=不需要的结果
3. 如果你使用table不改变它或它的孩子默认display属性。所以不要将td从display: table-cell改为display: flex。同样，它可能会导致不必要的结果
4. 不要使用内联样式。使用css样式表进行样式设置
5. 最后但最重要的是：不要在HTML结构中使用重复的ID。 shivakazan不止一次使用。 id必须是独一无二的。同样，它可能会导致不必要的结果。请改用类。

使用当前代码，您可以从float:left（现在更改为class）div中删除shivakazan并使用margin:5px auto。您还可以将text-align:center添加到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>

Answer 2

你需要在你的css #shivakazan中设置一个margin-left和margin-right。您的div自动从表格列的左侧开始，因此将您创建的红色圆圈告知边距 - 大约16.6665像素（（155.333-120）/ 2），确切的数字）将使图片居中。文本已经在列的内部居中。

#shivakazan{
margin-left: 16.6665px}

如果您愿意，可以按原样保留上下边距，但可能需要将margin-right更改为margin-left相同。

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

这是我以红圈为中心的最快方式。

额外注意：对于每个td元素，您重新定义宽度：153.333，这是不必要的。您在开始时定义了它，因此表的其余部分假设宽度为153.333。

我希望这有所帮助，至少给了你一个前进的想法。