Блог

У меня есть простой контурный круг, но я не могу отобразить интервал по центру.Я использую приведенный ниже код, но успешно отображается только первая ячейка 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;
}
  

Здесь подправьте.

Здесь есть несколько проблем

1. зачем использовать table? когда вы можете использовать flexbox-layout с самого начала
2. никогда не используйте float:left/right для верстки. Это выводит элементы из обычного потока документов = нежелательные результаты
3. если вы используете, table не изменяйте его или дочернее свойство по умолчанию display . Поэтому не меняйте td с display: table-cell на display: flex . Опять же, это может привести к нежелательным результатам
4. не используйте встроенные стили. Используйте вашу таблицу стилей css для оформления
5. Последнее, но самое важное: НЕ используйте повторяющиеся идентификаторы в вашей HTML-структуре. shivakazan используется более одного раза. id должно быть уникальным. Опять же, это может привести к нежелательным результатам. Вместо этого используйте class.

С помощью вашего текущего кода вы можете удалить float:left из shivakazan (теперь изменено на class ) div и использовать 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>  

Вам нужно установить левое поле и правое поле внутри вашего css #shivakazan. Ваш div автоматически начинается слева от столбца таблицы, поэтому указание созданному вами красному кружку на левое поле приблизительно 16.6665 пикселей ((155.333-120) / 2) для точного числа) будет центрировать изображение. Текст уже отцентрирован внутри столбца.

 #shivakazan{
margin-left: 16.6665px}
  

При желании вы можете оставить верхнее и нижнее поля как есть, но вам может потребоваться изменить значение правого поля на то, чтобы оно совпадало с значением левого поля.

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

Это просто самый быстрый способ, которым я центрировал красные круги.

Дополнительное примечание: для каждого элемента td вы переопределяете ширину: 153,333, что необязательно. Вы определили его в начале, поэтому остальная часть таблицы предполагает ширину 153,333.

Я надеюсь, что это помогло и дало вам хотя бы идею для продвижения вперед.