Question

我希望第一张图片贴在容器的顶部，下面的图片应该在它下面...顶部：0;让图像在容器上方... 200px，如果我只是说位置：相对它总是在中间......;

<div class="container">
    <div class="card_left"> 
        <p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
        <p style="font-size:1.2em;">Long text</p>
    </div>
    <div class="card_right">
        <img src="../res/images/artikel1bild.PNG"/>
        <img src="../res/images/artikel1bild.PNG"/>
    </div>

Answer 1

使用display: block，因此同一行中没有其他图片，margin: auto用于居中图像

img {
  display: block;
  margin: auto;
  width: 200px;
}

<div>
  <img src="https://www.w3schools.com/css/paris.jpg" />
  <img src="https://www.w3schools.com/css/paris.jpg" />
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

Answer 2

试试这个

 img {
  margin: 0, auto;width: 200px;display:inline-block;height:100px;
}

    <div class="card_right">
        <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
        <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
    </div>

Answer 3

如果您想坚持使用HTML，请在每张图片后添加<br />：

<div class="card_right">
   <img src="../res/images/artikel1bild.PNG"/><br />
   <img src="../res/images/artikel1bild.PNG"/><br />
</div>

或者更好的方法是制作单独的CSS文件并为display: block;代码设置img：

img {
   display: block;
}

示例：https://jsfiddle.net/nk8fbr76/

图像始终位于容器中间

3 个答案: