[分享]css两张图片水平居中

在设计和开发一个网站的过程中，CSS是一个非常重要的组成部分，它可以让网站看起来更美观、更易于使用。其中一个重要的方面就是如何让图片水平居中，下面我们来介绍两种实现方法。 1. 使用Flexb...

在设计和开发一个网站的过程中，CSS是一个非常重要的组成部分，它可以让网站看起来更美观、更易于使用。其中一个重要的方面就是如何让图片水平居中，下面我们来介绍两种实现方法。

  <div class="parent">
            <img src="image1.jpg" alt="image1">
        </div> 

1. 使用Flexbox布局

Flexbox是一种用于排列元素的布局模型，它可以让元素更加灵活。如果你想让你的图片水平居中，可以将图片嵌套在一个具有Flexbox属性的div中。

  .parent {
            display: flex;
            justify-content: center;
        }
        .parent img {
            width: 50%;
        } 

通过这种方式，图片将水平居中，并且它的宽度为父元素宽度的50%。

2. 使用text-align属性

如果你不想使用Flexbox布局，你可以使用text-align属性来对图片进行水平居中。使用text-align属性的前提是，需要将图片的显示方式设置为inline-block。

  .parent {
            text-align: center;
        }
        .parent img {
            display: inline-block;
            width: 50%;
        } 

通过这种方式，图片同样水平居中，而且它的宽度为父元素宽度的50%。

以上就是两种让图片水平居中的方法，它们各有各的优点，你可以根据不同的情况选择适合自己的方法。