我无法居中卡片 (HTML / CSS)

Question

我已经制作了一个投资组合网站，但我遇到的问题是我无法将卡片居中（如图所示）。当我尝试将“卡片”从导航栏中放入时，我无法将其置于网站中心，但当我不这样做时，它位于导航栏下方。

有人可以解释一下我是如何创建响应式网页设计的吗？

我希望任何人都可以帮助我。

        const list = document.querySelectorAll('.list');
        function activeLink(){
            list.forEach((item) =>
            item.classList.remove('active'));
            this.classList.add('active');
        }
        list.forEach((item) =>
        item.addEventListener('click',activeLink));

.container {
    position: relative;
    font-family: 'Roboto', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1850px;
    flex-wrap: wrap;
}
.container .card {
    position: relative;
    width: 280px;
    height: 400px; 
    margin: 30px;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}
.container .card .content {
    font-family: 'Roboto', monospace;
    padding: 20px;
    text-align: center;
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}
.container .card:hover .content {
    transform: translateY(0px);
    opacity: 1;
}
.container .card .content h2 {
    position: absolute;
    top: -80px;
    right: 30px;
    font-size: 8em;
    color:rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.container .card .content h3 {
    font-size: 1.8em;
    color: #fff;
    z-index: 1;
}
.container .card .content p {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
    transform-style: preserve-3d;
}
.container .card .content a {
     position: relative;
     display: inline-block;
     padding: 8px 20px;
     margin-top: 15px;
     background: #fff;
     color: #000;
     border-radius: 20px;
     text-decoration: none;
     font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

    <div class="centernav">
        <div class="navbar">
            <ul>
                <li class="list active">
                    <a href="#">
                        <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                        <span class="title">Home</span>
                    </a>
                </li>
                <li class="list">
                    <a href="2profil.html">
                        <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                        <span class="title">Profil</span>
                    </a>
                </li>
                <li class="list">
                    <a href="4settings.html">
                        <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                        <span class="title">Setting</span>
                    </a>
                </li>
                <li class="list">
                    <a href="5Galerie.html">
                        <span class="icon"><ion-icon name="images-outline"></ion-icon></span>
                        <span class="title">Galerie</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
                        <span class="title">Cooming Soon</span>
                    </a>
                </li>
                <li class="list">
                    <a href="#">
                        <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
                        <span class="title">Cooming Soon</span>
                    </a>
                </li>
                <li class="list">
                    <a href="8contact.php">
                        <span class="icon"><ion-icon name="mail-outline"></ion-icon></span>
                        <span class="title">Kontakt</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--Den Container genau neben der Navbar ohne den Container in die Div
        der Navbar rein zu packen
        -->
<!--========== Inhalt Profil ==========-->  
    </div>
<div class="container">
    <div class="card">
        <div class="content">
            <h2>01</h2>
            <h3>Profil</h3>
            <p> Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua </p>
            <a href="profil_readmore.html">Read More</a>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <h2>02</h2>
            <h3>Main Skills</h3>
            <p>Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua. </p>
                <a href="#">Read More</a>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <h2>03</h2>
            <h3>Tools</h3>
            <p>Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod temopr incididunt
                ut labore et dolor magna aliqua. </p>
                <a href="#">Read More</a>
         </div>
        </div>
    </div>
</div>

<!--========== Java Script ==========-->

    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

The Problem!

Answer 1

您可以使用 flex 来对齐它们。我还编辑了另外两件事：拼写错误和更多装饰。

注意：此导航栏不响应。卡片反应灵敏。

这是你的最终代码：

const list = document.querySelectorAll('.list');

function activeLink() {
  list.forEach((item) =>
    item.classList.remove('active'));
  this.classList.add('active');
}
list.forEach((item) =>
  item.addEventListener('click', activeLink));

.container {
  position: relative;
  font-family: 'Roboto', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1850px;
  flex-wrap: wrap;
}

.container .card {
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

.container .card .content {
  font-family: 'Roboto', monospace;
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}

.container .card .content h2 {
  position: absolute;
  top: -80px;
  right: 30px;
  font-size: 8em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.container .card .content h3 {
  font-size: 1.8em;
  color: #fff;
  z-index: 1;
}

.container .card .content p {
  font-size: 1em;
  color: #fff;
  font-weight: 300;
  transform-style: preserve-3d;
}

.container .card .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background: #fff;
  color: #000;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.someclass {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.someclass .list {
  margin: 10px;
  list-style: none;
}

.someclass .list a {
  text-decoration: none;
}

<div class="centernav">
  <div class="navbar">
    <ul class="someclass">
      <li class="list active">
        <a href="#">
          <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
          <span class="title">Home</span>
        </a>
      </li>
      <li class="list">
        <a href="2profil.html">
          <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
          <span class="title">Profile</span>
        </a>
      </li>
      <li class="list">
        <a href="4settings.html">
          <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
          <span class="title">Settings</span>
        </a>
      </li>
      <li class="list">
        <a href="5Galerie.html">
          <span class="icon"><ion-icon name="images-outline"></ion-icon></span>
          <span class="title">Galery</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
          <span class="title">Cooming Soon</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon"><ion-icon name="hourglass-outline"></ion-icon></span>
          <span class="title">Cooming Soon</span>
        </a>
      </li>
      <li class="list">
        <a href="8contact.php">
          <span class="icon"><ion-icon name="mail-outline"></ion-icon></span>
          <span class="title">Contact</span>
        </a>
      </li>
    </ul>
  </div>
  <!--Den Container genau neben der Navbar ohne den Container in die Div
    der Navbar rein zu packen
    -->
  <!--========== Inhalt Profil ==========-->
</div>
<div class="container">
  <div class="card">
    <div class="content">
      <h2>01</h2>
      <h3>Profile</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua </p>
      <a href="profil_readmore.html">Read More</a>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <h2>02</h2>
      <h3>Main Skills</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua. </p>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <h2>03</h2>
      <h3>Tools</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temopr incididunt ut labore et dolor magna aliqua. </p>
      <a href="#">Read More</a>
    </div>
  </div>
</div>

<!--========== Java Script ==========-->

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

希望对你有帮助:)