我正在try 添加一些小的.主容器中水平行中的png图标.我正在努力找出最简单的方法来做这件事

下面是我迄今为止创建的代码Sandbox

我已经为此挣扎了一段时间,但我似乎无法得到它.我try 过创建一个div,在div中插入标签,但我认为这是不对的.非常感谢您的帮助!

推荐答案

你喜欢这样吗

首先导入顶部的img_路径

import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";

然后定义一个样式为flex flex-direction:row的div,如下所示

            <div className="img-container">
              <div className="img">
                <img src={imgurl1} alt="aws" />
              </div>
              <div className="img2">
                <img src={imgurl2} alt="c" />
              </div>
              <div className="img3">
                <img src={imgurl3} alt="java" />
              </div>
            </div>

像这样的风格

.img-container {
  display: flex ;
  flex-direction: row ;
}
.img1, .img2 ,.img3 {
  /* any style for  the images */ 
  background-color: black;
}

Css相关问答推荐

如何改变图标的 colored颜色 时悬停在

如何将div与图像维度进行zoom ?

使用间距时奇怪的MUI网格行为

如何在点击时停止动画并将其返回到第一帧?

我无法在css中设置填充或边距

如何使用Bootstrap将图像水平对齐,使其顶部和底部位于同一水平线上?

使用高图的背景大小渐变

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗?

使用 CSS 关键帧动画更改内容

没有字母间距的CSS悬停边框

如何阻止 Mud Blazor MudTable 列扩展以适合文本

背景上带有文本的按钮的反转 colored颜色

TypeScript 中有效的 CSS 属性名称数组,但带有连字符

为什么同一个 CSS 类连续出现两次

在 React Native 中创建背景

子组件的css会影响整个页面

带有图像的 CSS 网格在 Firefox 中表现不同

如何保持包装的弹性项目与前一行元素的宽度相同?

Select 标签的占位符

从样式设置为 % 的元素获取宽度(以像素为单位)?