Центральные элементы css html

Question

У меня реализован jquery DatePicker. Через несколько дней я показываю несколько цветных точек. Эти точки представляют информацию того дня.

У меня проблемы с css.

Я хочу центрировать точки по номеру. Если я сделаю это, то дни с точками не будут совмещены по горизонтали с другими днями. Я добавил фото, которое представляет это. Дни 22, 23, 24, 28, 29, 16, 17, в которых есть точки, не совпадают с другими днями.

Как я могу совместить дни с точками?

<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">28</a>
    <div class="dot-container">
        <div class="dot orange"></div>
        <div class="dot black"></div>
        <div class="dot red"></div>
        <div class="dot blue"></div>
    </div>
</td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">29</a>
    <div class="dot-container">
        <div class="dot black"></div>
        <div class="dot orange"></div>
        <div class="dot yellow"></div>
        <div class="dot red"></div>
    </div>
</td>

.ui-state-default{
    text-align:center !important;
}

.dot-container {
    text-align: center;
}

.dot{
  width: 7px !important; 
  height: 7px !important;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;

}

@media (max-width: 450px) { 
    .dot{
         width: 5px !important; 
         height: 5px !important;
         border-radius: 50%;
         display: inline-block;
         margin-right: 2px;
    }
 }
.red{
   background-color: red !important;
}
.blue{
   background-color: blue !important;
}
.yellow{
  background-color: yellow !important;
}

.green{
     background-color: green !important;
}
.black{background-color: black !important;}
.orange{background-color: orange !important;}


.ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none !important;
    background-color: #fff !important;
    padding: 10px 0 !important;
    max-width: 40px;
    max-height: 40px;
    margin: 10px 0 !important;
    margin-top: 10px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 2px !important;
}

Я пытался добавить в класс контейнера точек положение атрибута: absolute. Если я делаю это, все цифры дня выровнены, но не центрированы.

Answer 1

Использовать CSS свойство вертикального выравнивания для td

td {
    vertical-align:top;
}

Answer 2

Кажется, что так просто

td{
    position: relative;
}
.dot-container{
    position: absolute;
    left: 0;
    top: 100%;

}

Второй способ: (после @saran)

td {
    vertical-align:top;
}