如何使用 DIV 或其他在 HTML 和 CSS 中定位图像答案

【问题标题】：How to position an image in HTML & CSS with DIV or other如何使用 DIV 或其他在 HTML 和 CSS 中定位图像
【发布时间】：2021-07-13 07:42:45
【问题描述】：

你好，我一直在寻找不同的教程，我尝试了不同的东西，但到目前为止没有任何效果，所以我在这里想知道是否有人可以帮助我进行这个测试项目（为了学习）或将我重定向到我正在解释我的担忧的教程：

我想定位我的图像（目前处于这种状态：https://prnt.sc/11ojid4，通过这种方式定位它们：https://prnt.sc/11ojiuk） 所以我想这样定位它们： 2 张图片，然后：下面的 3 张图片将像图片一样居中在这 3 张图片下方添加最后 3 张如果不清楚，请告诉我，我可以解释，如果不是在屏幕上，您可以看一下它非常明确，但正如我所说，我可以解释

目前我的代码如下所示：（在触摸 css 中的图像之前将我的代码放回原处）：

    @import url(https://fonts.googleapis.com/css?family=Dosis:300,400);


* {
    margin: auto;
    padding: auto;
}

body {
    min-height: 100vh;
    background-color: #3e3e3e;
}

header {
    background-color: rgba(15, 15, 15, 0.99)!important;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
    left: 50%;
    padding: 10px 20px;
    text-align: center;
    opacity: 0.9;
}


.home, .forums, .store {
    padding: 10px 15px;
    background: transparent;
    border: none;
}

.home-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
}



.forums-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 22px;

}


.store-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
}


.register {
    padding: 10px 15px;
    list-style-type: none;
    padding-right: 15px;
    text-align: center;
}

.register-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;

}

.login {
    padding: 10px 15px;
    list-style-type: none;
    text-align: center;
}

.login-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
}


.login-register {
    display: flex; 
    justify-content: center;
}

img {
    width: 256px;
    height: 50px;
}

.header-logo {
    position: absolute;
    top: 10px;
    left: 10px; 
    width: 192px;
    height: 50px;
}



/* Ne pas faire attention je test un effet shine sur mes boutons */
.home-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .store-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .forums-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .login-a:hover {
    color: rgba(255,255,255,.55);
  }

  .register-a:hover {
    color: rgba(255,255,255,.55);
  }
  

  .features {
    height: 600px;
    background-color: #3e3e3e;

}

.purchase {
    height: 600px;
    background-color: #3e3e3e;

}


.kurium__title {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    font-family: 'Nunito';
    font-size: 36px;
    color: #DDDDDD;
    font-weight: 300;
    padding-left: 600px;
    display: inline-block;
}

.kurium__second__title {
    font-size: 36px;
    font-family: "Nunito";
    font-weight: 700;
    color: #ffffff;
    display: inline-block;

}

  .features__title {
      padding-top: 20px;
      display: block;
      padding-right: 140px;
      text-align: center;
      font-family: 'Nunito';
      font-size: 21px;
      color: rgb( 255, 255, 255 );

  }

  .purchase__title {
    display: block;
    padding-right: 140px;
    text-align: center;
    font-family: 'Nunito';
    font-size: 21px;
    color: rgb( 255, 255, 255 );
  }

  .media__title {
    display: block;
    padding-right: 140px;
    text-align: center;
    font-family: 'Nunito';
    font-size: 21px;
    color: rgb( 255, 255, 255 );
  }


  footer {
      text-align: center;
      color:  rgb( 255, 255, 255 );
      text-decoration: none;
      font-family: 'Nunito';
      font-size: 17px;
      padding: 10px 20px;
      padding-right: 120px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
      background-color: rgba(34, 33, 33, 0.1)!important;
  }

  .image__feature {
  }


**And for my HTML file here it is:**

    <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="main.css">

    <link rel="icon" type="img/svg+xml" href="img/favicon.svg">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

    <title>Home | Kurium v4.5</title>

</head> 

<body>

    <header>
        <div style="display: flex;">
        
            <div style="width: 100%;">
        <ul class="kurium-button">
            <img class="header-logo" src="img/logo.svg" alt="Kurium Header Logo">
    
            <button class="home"><a class="home-a" href="https://google.fr/">Home</a> </button>
            <button class="forums"><a class="forums-a" href="https://google.fr/">Forums</a> </button>
            <button class="store"><a class="store-a" href="https://google.fr/">Store</a> </button>
        </ul>
    </div>
        
        <div style="width: 10%;">
            <ul class="login-register">
            <!-- A remplacer par : Flexbox -->
            <li class="register" style="float:right"><a class="login-a" href="register.html">Login</a></li></button>
            <li class="login" style="float:right"><a class="register-a" href="login.html">Register</a></li></button>
        </ul>
    </div>
    </div>
        </header>
          <div class="title__wrapper"></div>
            <h1 class="kurium__title">Kurium.</h1>
            <h1 class="kurium__second__title">  Like steroids for Minecraft</h1>
          </div>

        <h1 class="features__title">Features</h1>
          <div class="features">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
          </div>

        <h1 class="purchase__title">Purchase</h1>
          <div class="purchase">
            <img class="image__purchase" src="https://via.placeholder.com/150">
            <img class="image__purchase" src="https://via.placeholder.com/150">
          </div>


        <h1 class="media__title">Media</h1>
          <div class="media">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
          </div>


<!--  Sidebar (Right side in the center) 
            <h1 class="social">Follow US !</h1>
        <div class="follow_us">
            <img class="image_social" src="img/twitter.svg">
            <img class="image_social" src="img/instagram.svg">
            <img class="image_social" src="img/facebook.svg">
            <img class="image_social" src="img/youtube.svg">
            <img class="image_social" src="img/tiktok.svg">
        </div>
-->

        <footer>
            Copyright by Kurium 2017 - 2021
        </footer>

</body>

</html>

我真的希望有人能够帮助我，因为一个多星期以来我的大脑一直在燃烧，flexbox上的法语教程难以理解，因此如果有人有解决方案，可以在详细说明我接受的所有内容/如果您有关于 flexbox 的教程（最好是法语的，但如果用英语很好地解释就好了）提前感谢您希望社区为我带来的帮助很快就轮到我带来一些 x)

【问题讨论】：

你在使用 Twitter 引导程序吗？会让事情变得更容易：getbootstrap.com/docs/5.0/layout/grid。如果您向下滚动到 Auto-layout 列，您可以看到您要实现的目标非常相似
我不使用它，因为我还是个初学者，我更喜欢在香草中学习html和css
最好先使用原生 HTML 和 CSS，一旦你对事物的工作原理有了很好的理解，然后你就可以迁移到任何其他框架，如引导程序或 Material UI 等
基本上，您将创建 3 行，并且在每行中，您分别创建 2、3 和 3 个项目。就像 Aqib 所做的一样，但就个人而言，我也会将图像放入 div 中

标签： html css image css-position

【解决方案1】：

我遇到了一个使用 flexbox 的解决方案，它也是响应式的，首先在您的 HTML 文件中，我添加了一些额外的 div 并将图像存储为一组 2、3 和 3

   <div class="features">
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
      </div>

为响应增加了 70vw 的容器宽度

 .features {
     /* setting container width responsive */
    width: 70vw; 
     background-color: #3e3e3e;
 }

为每个 features-row-1 div 设置 flexbox 属性

  .features-row-1{
     display: flex;
     justify-content: center;
}

以特征 div 中定义的 70vw 的百分比定义宽度和高度

.image__feature {
     width: 20%;
     height: 30%;
     margin: 5px 10px 5px 10px;
   }

有关所需输出，请参阅我的codepen

【讨论】：

非常感谢您的解释，他们很清楚我感谢您和代码，它的功能我会重新调整它，因为有一些问题（在我这边，实际上您所做的是很好地居中）-所以我将根据您发送给我的 css 和 html 重新调整/测试内容我再次感谢您的解释，并帮助您的回复对我有很大帮助