在表td中显示到中心的跨度

时间:2019-03-27 14:37:57

标签: html css

我有一个简单的计数器圆圈,但是无法在中心显示跨度。我使用下面的代码,但只有第一个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在这里。

2 个答案:

答案 0 :(得分:1)

这里有一些问题

  1. 为什么使用表格?您可以从一开始就使用flexbox布局
  2. 切勿使用float:left/right进行布局。它使元素脱离正常的文档流程=不必要的结果
  3. 如果您使用table,请不要更改它,或者它是其子级默认display属性。因此,请勿将tddisplay: table-cell更改为display: flex。同样,这可能会导致不良结果
  4. 请勿使用内联样式。使用CSS样式表进行样式设置
  5. 最后但最重要:请勿在HTML结构中使用重复的ID。 shivakazan被多次使用。 id必须是唯一的。同样,它可能导致不良结果。改用class。

使用当前代码,您可以从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>

答案 1 :(得分:0)

您需要在CSS #shivakazan中设置左页边距和右页边距。您的div是自动从表格列的左侧开始的,因此,告诉您在左边距处创建的红色圆圈大约为16.6665px(精确数字为((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。

我希望这对您有所帮助,并至少给您提供了前进的思路。