css中放入图片且两个一行居中

今天我们来学习如何在CSS中放入图片，并且将两个图片一行居中显示。首先，我们需要使用HTML代码在文档中插入两张图片，代码如下:

 <div class="image-container">
    <p>这是第一个图片:</p>
    <img src="path/to/first/image">
  </div>

  <div class="image-container">
    <p>这是第二个图片:</p>
    <img src="path/to/second/image">
  </div> 

此处我们使用了一个class名为'image-container'的div容器来包裹图片和描述文字。接着，我们需要在CSS文件中添加样式来控制这个容器，让图片水平居中。

 .image-container {
    display: inline-block;
    text-align: center;
    margin: 20px;
  }

  img {
    max-width: 100%;
    height: auto;
  } 

我们把 .image-container 的 display 属性值设置为 inline-block，这样两个容器就会排列在一行显示。同时，我们使用了 text-align: center 属性把图片和描述文字水平居中。margin 属性用来添加一点间距，使图片看起来更舒适。最后，我们使用了 img 标签的 max-width 和 height 属性来确保图片宽度不会超过容器的大小。
通过以上代码，我们成功地将两张图片放入到CSS中，并且都居中显示在一行。这样的实现方式可以让我们更好地控制图片大小和位置，使页面看起来更美观。