css 对正中心不在中心位置

9cbw7uwe  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(148)

我正在vue中创建一个简单的步进器组件。我已经能够实现所需的功能,但即使在应用justify-content: center之后,对齐也会向左移动
下面是我的代码https://codesandbox.io/s/awesome-sky-pj9p5x

<template>
  <div class="flex justify-center full-width" style="border: 1px">
    <div class="flex no-wrap justify-center full-width">
      <div
        class="flex full-width items-center q-pb-xl"
        v-for="steps in data"
        :key="steps.key"
      >
        <div
          class="stepper-circle"
          :class="{
            'stepper-circle--filled': currentStep === steps.key,
            'stepper-circle--unfilled': currentStep < steps.key,
          }"
        >
          <q-icon
            v-if="currentStep > steps.key"
            name="check"
            color="white"
            size="xs"
          />
          <div
            v-else
            class="stepper-circle__dot"
            :class="{
              'stepper-circle__dot--active': currentStep === steps.key,
            }"
          />
          <div
            class="stepper-circle__label"
            :class="{ 'text-grey fw3': currentStep < steps.key }"
          >
            {{ steps.name }}
          </div>
        </div>
        <div
          :class="{
            'stepper-separator': steps.key < data.length,
            'stepper-separator--active': steps.key < currentStep,
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Stepper",

  data() {
    return {
      currentStep: 1,
      data: [
        {
          name: "Step 1",
          key: 1,
        },
        {
          name: "Step 2",
          key: 2,
        },
        {
          name: "Step 3",
          key: 3,
        },
      ],
    };
  },

  methods: {
    getSeparatorWidth(stepKey) {
      const totalSteps = this.data.length - 1;
      const widthPercentage = (100 / totalSteps) * stepKey;
      return widthPercentage;
    },
  },
};
</script>
<style lang="scss" scoped>
.items-center {
  align-items: center;
}
.full-width {
  width: 100%;
}
.justify-center {
  justify-content: center;
}
.flex {
  display: flex;
}
.stepper-separator {
  height: 2px;
  background: #d1d5db;
  transition: width 2s;
  flex-grow: 1;
}

.stepper-separator--active {
  background: #08104d;
}

.stepper-circle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid #08104d;
  border-radius: 50%;
  background-color: #08104d;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  line-height: 15px;
}

.stepper-circle__dot {
  background: #d1d5db !important;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.stepper-circle__dot--active {
  background: #08104d !important;
}

.stepper-circle__label {
  position: absolute;
  top: 45px;
  font-size: 10px;
  color: #08104d;
  font-weight: 600;
  display: flex;
  white-space: normal;
  width: 80px;
  justify-content: center;
  text-align: center;
}

.stepper-circle--filled {
  background: rgb(255, 255, 255) !important;
  border: 2px solid #08104d !important;
}

.stepper-circle--unfilled {
  background: white !important;
  border: 2px solid #d1d5db !important;
}
</style>

字符串

2izufjch

2izufjch1#

你必须最大化最后一个元素的宽度,并解决你对响应性的担忧,就像这样:

.flex.full-width.items-center.q-pb-xl:nth-child(3) {max-width: 36px;}

字符串
因为否则它会将内容向左拉伸。

whlutmcx

whlutmcx2#

要使步进器居中,您可以将整个组件 Package 在另一个div中,并对其应用justify-content: center;
举例说明;

<template>
 <div class="flex justify-center full-width" style="border: 1px">
   <div class="flex justify-center">
     <div class="flex no-wrap justify-center full-width">
       <!-- Your existing code -->
     </div>
   </div>
 </div>
</template>

字符串
但是,如果您还想垂直居中显示stepper组件,则可以使用align-items: center;属性将flex项沿着容器中心的垂直线对齐。
举例说明;

<template>
 <div class="flex justify-center items-center full-height" style="border: 1px">
   <div class="flex justify-center">
     <div class="flex no-wrap justify-center full-width">
       <!-- Your existing code -->
     </div>
   </div>
 </div>
</template>


注意,要使align-items: center;工作,flex容器的父容器的高度应该大于flex容器的高度。因此,将高度设置为最大值;

.full-height {
 height: 100%;
}

相关问题