CSS如何将不同尺寸的图像与行内的文本对齐？答案

【问题标题】：CSS how to align different size images with text inside row?CSS如何将不同尺寸的图像与行内的文本对齐？
【发布时间】：2021-05-16 08:30:22
【问题描述】：

需要将四个不同高度（beetween 160-180px）svg 图片与下方的文字对齐。图片应该在视线范围内放置，我不知道如何像屏幕截图那样在一行中严格对齐它们下方的短文本。

谢谢！

UPD：抱歉信息不便，认为这个问题对于那些懂 css 的人来说很典型。这是我的html和css。我也在使用bootstrap 行。

    <div class="did-you-know">
    <div class="row items">
        <div class="col-lg-3 col-xs-6">
            <div class="icon">
                <img src="/img/mswa/inline-wa.svg"/>
            </div>
            <div class="title text-poppins">
                <p>We’re from WA</p>
                <p>{like you!}</p>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="icon">
                <img src="/img/mswa/inline-packaging.svg"/>
            </div>
            <div class="title text-poppins">
                <p>We use minimal packaging</p>
                <p>{great for the planet}</p></div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="icon">
                <img src="/img/mswa/inline-quality.svg"/>
            </div>
            <div class="title text-poppins">
                <p>We only choose quality</p>
                <p>{better for your health}</p></div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="icon">
                <img src="/img/mswa/inline-community.svg"/>
            </div>
            <div class="title text-poppins">
                <p>We love giving back</p>
                <p>{great for our community}</p></div>
        </div>
    </div>
</div>


.did-you-know {
    padding: 20px;
    text-align: center;
}

.did-you-know .items .icon {
    padding: 50px;
}
.did-you-know .items .title {
    font-size: 20px;
}

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css svg

【解决方案1】：

这里有一个解决方案：
用您的图片替换图片。

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
    <p style='text-align: center;'>test1</p>
  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
        <p style='text-align: center;'>test2</p>

  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
    <p style='text-align: center;'>test3</p>
  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
    <p style='text-align: center;'>test3</p>
  </div>
  
</div>

</body>
</html>

【讨论】：