我有一个简单的计数器圆圈,但是无法在中心显示跨度。我使用下面的代码,但只有第一个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在这里。
答案 0 :(得分:1)
这里有一些问题
float:left/right
进行布局。它使元素脱离正常的文档流程=不必要的结果table
,请不要更改它,或者它是其子级默认display
属性。因此,请勿将td
从display: table-cell
更改为display: flex
。同样,这可能会导致不良结果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。
我希望这对您有所帮助,并至少给您提供了前进的思路。