[分享]css中 img垂直居中显示

CSS中，图片的垂直居中显示是一个常见的问题。在应用场景中，我们往往会遇到这种情况：图片需要和文字一起在同一行内显示，并且需要垂直居中。下面让我们来看看如何实现这一效果。 .wrapper { di...

CSS中，图片的垂直居中显示是一个常见的问题。在应用场景中，我们往往会遇到这种情况：图片需要和文字一起在同一行内显示，并且需要垂直居中。下面让我们来看看如何实现这一效果。

  .wrapper {
            display: flex;
            align-items: center;
        }
        .wrapper img {
            margin-right: 10px;
            width: 50px;
            height: 50px;
            object-fit: cover;
            vertical-align: middle;
        } 

首先，我们需要将包含图片和文字的容器设置为flex布局，并利用align-items属性使其垂直居中。接下来，我们需要在img标签中给定宽度和高度，利用object-fit属性放缩图片并让其填充整个空间。最后，利用vertical-align属性使得图片垂直居中。

需要注意的是，当图片和文字大小不一致时，可能会导致垂直居中的偏移。在这种情况下，可以通过设置合适的line-height或者利用position属性来解决问题。