首页 文章

flexbox对齐中心垂直和水平不正常

提问于
浏览 次
0

我知道使用合理内容来居中Flex容器背后的基本概念：center和align-items center，问题是盒子没有正确对齐：S

This is what i tried so far:

<template>
  <div>
    <main class="container">
        <div class="container__left">
          <div>I'm Jonathan Doe</div>
          <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum v Lorem ipsumv Lorem ipsumLorem ipsumLorem ipsum v v</div>
          <ul>
            <li>one bla bla bla</li>
            <li>two bla bla bla</li>
            <li>three bla bla bla</li>
          </ul>
          <div>
            <button>first</button>
            <button>second</button>
          </div>
        </div>
        <div class="container__right">

        </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Exo");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 1rem;
  font-family: "Exo", sans-serif;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 80vh;
  width: 80%;
  border: 8px solid #3f3f3f;
}

.container__left {
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 50% 0, 48% 100%, 0 100%);
  background-color: #1c1f24;
}
</style>

宽度和高度可能有问题，但我无法弄清楚这有什么问题，任何帮助？

javascript html css vue.js flexbox

1 回答

  • 0

    首先，你在你的css中使用了 .main 而不是 main . 第二件事是，你不需要flexbox来定位你的盒子，

    margin:auto;

    在容器上就足够了

    检查下面的代码段

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  padding: 1rem;
  font-family: "Exo", sans-serif;
}

.main-parent {
  height: 100%;
  display: flex;
}

main {
  margin: auto;
}

.container {
  height: 80vh;
  width: 80%;
  border: 8px solid #3f3f3f;
}

.container__left {
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 50% 0, 48% 100%, 0 100%);
  background-color: #1c1f24;
}

    <div class="main-parent">
  <main class="container">
    <div class="container__left">
      <div>I'm Jonathan Doe</div>
      <div>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum v Lorem ipsumv Lorem ipsumLorem ipsumLorem ipsum v v</div>
      <ul>
        <li>one bla bla bla</li>
        <li>two bla bla bla</li>
        <li>three bla bla bla</li>
      </ul>
      <div>
        <button>first</button>
        <button>second</button>
      </div>
    </div>
    <div class="container__right">

    </div>
  </main>
</div>
    回复于

相关问题