使用tailwindCSS将div居中到右下角

Question

我有这张用 tailwindCSS 制作的卡片。

<div class="flex flex-wrap -mx-3 mb-3">
    <div class="px-3 mb-6 w-1/3">
        <div class="card card-panel">
            <div class="mx-3 my-3">
                <div class="sunpart">
                    <div class="content-sunpart ">
                        <div class="title">Ma part de soleil</div>
                        <div class="chart-wrapper "></div>
                        <div class="circlevalue">52
                            <span class="percent">%</span> <span class="suninfo">de soleil</span></div>
                        <div class="sunvalue resize">Soit</div>
                        <div class="sunvalue orange">12</div>
                        <div class="sunvalue kwh">kWh</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

与：

.sunvalue {
        width: 23%;
        height: auto;
        position: absolute;
        bottom: 28px;
        right: 10px;
        color: #666;
        font-weight: 300;
        font-size: 11px;
        text-align: right;
    }

在.sunvalue 中，它应该与卡片的右下角对齐，但它没有。

与52% de soleil 相同，应该垂直对齐：

.circlevalue {
    top: 52%;
}

但它不会垂直居中。

谁能解释我为什么以及我应该怎么做？

这是我使用的完整 CSS 定义：

使用 CSS：

.sunpart  {
    position: relative;
    width: 100%;
    height: 35%;
    margin: 0 0 20px;
    background: hsla(0,0%,98%,.6);

}

.sunpart .content-sunpart canvas {
    position: absolute;
    top: 50%;
    transform: translateY(-48%);

}
.resize {
    font-size: 16px !important;
}

.title{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 10px 10px 0 15px;
    color: #1b577f;
    font-size: 18px;
    text-align: left;
    z-index: 100;
    background: transparent;
    font-weight: 800;
}
.customer-wrapper .sidebar .sunpart .content-sunpart {
    position: relative;
    width: 100%;
    height: 100%;
}

.sunpart .chart-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15%;
    background: url(../images/soleil.png) no-repeat center center / 80% auto;
    //background: url(/static/media/soleil.746b1ea8.png) no-repeat 50%/80% auto;
}
.circlevalue {
    position: absolute;
    top: 52%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    color: #fe8e22;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
}

.circlevalue span.suninfo {
    font-size: 16px;
    color: #666;
    left: 41%;
    top: 61%;
    font-weight: 300;
    display: block;
    text-align: center;
}

.sunvalue {
    width: 23%;
    height: auto;
    position: absolute;
    bottom: 28px;
    right: 10px;
    color: #666;
    font-weight: 300;
    font-size: 11px;
    text-align: right;
}

.sunvalue.orange {
    font-size: 25px;
    bottom: 13px;
    right: 50px;
    color: #fe8e22;
    font-weight: 700;
}

.sunvalue.kwh {
    font-size: 14px;
    bottom: 10px;
    right: 10px;
    font-weight: 700;
}
.mysunpart{
    height: 220px;
}

这是codepen

Answer 1

Tailwind 是实用程序优先的 CSS 框架。这意味着您不必编写所有这些 CSS。通过应用 顺风特定类，一切都会发生。如text-lg、px-3、mb-6或w-1/3。正如你已经开始做的那样。

对于对齐问题，flexbox 是最简单的解决方案之一。 你需要申请https://tailwindcss.com/docs/align-items（垂直定位） 或https://tailwindcss.com/docs/justify-content（水平定位）

我不确定您希望它是怎样的，但这里是一个仅使用顺风类（无自定义 css）的示例。

<link href="https://unpkg.com/tailwindcss@1.5.2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="relative w-full text-gray-600 p-3 h-32">
  <div class="absolute flex items-center justify-center inset-0 bg-gray-200">
    <div class="flex flex-col text-center">
      <span class="text-orange-500 text-4xl font-bold">52%</span>
      <span class="font-light">de soleil</span>
    </div>
  </div>
  <div class="relative w-full h-full flex justify-between">
    <div class="text-lg text-blue-800 font-semibold">Ma part de soleil</div>
    <div class="flex flex-col text-right text-xs mt-auto">
      <span>Soit</span>
      <span class="text-xl text-orange-500 font-bold leading-none">12</span>
      <span class="font-semibold">kWh</span>
    </div>
  </div>
</div>