时间戳

首页 > 解决方案 > 中心元素 css html

jquery - 中心元素 css html

问题描述

我实现了一个 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;
}

我尝试通过向点容器类添加属性位置：绝对。如果我这样做，所有日期的数字都会对齐，但不会居中。

标签： jqueryhtmlcss

解决方案

为 td 使用 CSS 属性 vertical-align

td {
    vertical-align:top;
}

推荐阅读