如何在各自的 div 中水平居中垂直进度条？

Question

我使用 materializecss 作为我的框架来显示一些进度条。它们最初是水平的，但我使用 CSS 变换属性将它们垂直旋转。我注意到 div 类“progress progress-dashboard-full vertical”没有在它的父 div class="col s3 m3 l3" 的中心排列。

我在全屏上并没有真正注意到太多，但如果我缩小到较小的屏幕尺寸，div 和进度条不会居中。有人可以解释我需要做什么才能使进度条均匀分布并在父 div 内居中吗？

.vertical {
  -ms-transform: rotate(270deg)translate(0px, -17px);
  -webkit-transform: rotate(270deg)translate(0px, -17px);
  transform: rotate(270deg)translate(0px, -17px);
  height: 3rem;
  width: 12rem !important;
  ;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  transform-origin: 40% 70%;
}

.vertical-determinate {
  height: 100% !important;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.materialID-bars {
  background-color: #FAFF0D;
  padding: 5px 10px 5px 10px;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row m-b-0" style="">
  <div class="col s3 m3 l3 p-l-0 p-r-0">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-dashboard-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-dashboard-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-supports-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-supports-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="materialID-bars" style="clear: both; position: relative; bottom: 4rem">316L Stainless</div>
</div>

Answer 1

看看这个——我在底部为.progress.vertical添加了一个样式块——在这里我消除了现有的边距，然后将平移距离调整为高度的一半。我认为这看起来接近你的目标......

.vertical {
  -ms-transform: rotate(270deg)translate(0px, -17px);
  -webkit-transform: rotate(270deg)translate(0px, -17px);
  transform: rotate(270deg)translate(0px, -17px);
  height: 3rem;
  width: 12rem !important;
  ;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  transform-origin: 40% 70%;
}

.vertical-determinate {
  height: 100% !important;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.materialID-bars {
  background-color: #FAFF0D;
  padding: 5px 10px 5px 10px;
  text-align: center;
}

.progress.vertical {
  margin: 0;
  -ms-transform: rotate(270deg)translate(0px, -2px);
  -webkit-transform: rotate(270deg)translate(0px, -2px);
  transform: rotate(270deg)translate(0px, -2px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row m-b-0" style="">
  <div class="col s3 m3 l3 p-l-0 p-r-0">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-dashboard-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-dashboard-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-supports-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="col s3 m3 l3 p-l-0 p-r-0" style="">
    <div class="progress progress-dashboard-full vertical">
      <div class="determinate progress-supports-loaded vertical-determinate" style="width: 50%"></div>
    </div>
  </div>
  <div class="materialID-bars" style="clear: both; position: relative; bottom: 4rem">316L Stainless</div>
</div>