在我的CSS中格式化图像时遇到问题

社区！ 我有一些图片的格式设置有问题

HTML

<footer>
    <section class="socialmedia">
        <a href=""><img src="facebook.png" class="sm"></a>
        <a href=""><img src="twitter.png" class="sm"></a>
        <a href=""><img src="instagram.png" class="sm"></a>
    </section>
</footer>

图像只是垂直排列在页面左侧，所有图像都保持原始大小。据我所知

浮动：左

是用来使它们水平的吗

我也希望他们是集中在页面上，但保证金：自动；也没有改变任何事情

编辑：我希望每个图像之间也有一定的间距，是否有替代方法

 

您可以简单地执行此操作（不需要float和left属性）：

img.sm{
最大宽度：30px；
宽度：100%；
保证金：5px；
}
/*添加悬停效果*/
img.sm：悬停{
不透明度：0.7；
}
.社会媒体{
显示：块；
文本对齐：居中；
}

您可以简单地执行此操作（不需要float和left属性）：

img.sm{
最大宽度：30px；
宽度：100%；
保证金：5px；
}
/*添加悬停效果*/
img.sm：悬停{
不透明度：0.7；
}
.社会媒体{
显示：块；
文本对齐：居中；
}

---

试试这个。我希望这能解决你的问题

.sm{
显示：块；
}
/*添加悬停效果*/
.sm:悬停{
不透明度：0.7；
}
.社会媒体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.socialmedia>a{
显示：内联块；
}

---

试试这个。我希望这能解决你的问题

.sm{
显示：块；
}
/*添加悬停效果*/
.sm:悬停{
不透明度：0.7；
}
.社会媒体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.socialmedia>a{
显示：内联块；
}

---

如何将您的样式更改为：

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    text-align: center;
}

---

您在错误的类上应用了错误的属性。

将样式更改为以下样式如何：

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    text-align: center;
}

您在错误的类上应用了错误的属性。

无需使用浮点：）

在父元素上使用

text align

可以简单地使用

display:inline块

我还将类
.sm
放在了
元素上，以便于实现这一点
 无需使用浮点：）

在父元素上使用
text align
可以简单地使用
display:inline块

我还将类
.sm
放在了
元素上，以便于实现这一点
 请注意，您希望图像并排显示，但您使用的是
.socialmedia
元素上的
float
，它是容器而不是图像。因此，您应该将CSS更改为：

.socialmedia {
    display: block;
    left: 45%;
}
.socialmedia img {
    float: left;
}


.sm{
显示：块；
}
/*添加悬停效果*/
.sm:悬停{
不透明度：0.7；
}
.社会媒体{
显示：块；
左：45%；
}
.socialmedia img{
浮动：左；
}
img{
边框：1px纯红；
高度：50px；
宽度：50px；
}
请注意，您希望图像并排显示，但您使用的是
.socialmedia
元素上的
float
，它是容器而不是图像。因此，您应该将CSS更改为：

.socialmedia {
    display: block;
    left: 45%;
}
.socialmedia img {
    float: left;
}


.sm{
显示：块；
}
/*添加悬停效果*/
.sm:悬停{
不透明度：0.7；
}
.社会媒体{
显示：块；
左：45%；
}
.socialmedia img{
浮动：左；
}
img{
边框：1px纯红；
高度：50px；
宽度：50px；
}
使其水平的是显示：块

您可以使用以下代码

“文本对齐”将元素定位在中心

对于间距，请使用边距或填充

.socialmedia {
    width: 100%;
    text-align: center;
}

.sm {
    height: 50px;
    width: 50px;
    margin: 10px;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

祝你好运，并有一个美好的一天
 使其水平的是显示：块

您可以使用以下代码

“文本对齐”将元素定位在中心

对于间距，请使用边距或填充

.socialmedia {
    width: 100%;
    text-align: center;
}

.sm {
    height: 50px;
    width: 50px;
    margin: 10px;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

祝你好运，并有一个美好的一天
 您将样式应用于错误的类。不是
.socialmedia
需要
浮动
，而是
.sm
。此外，您将
.socialmedia
设置为仅
2%
宽，因此图像除了垂直排列外别无选择。您将样式应用于错误的类。不是
.socialmedia
需要
浮动
，而是
.sm
。此外，您将
.socialmedia
仅
2%
变宽，因此图像除了垂直排列外别无选择。现在我们已经取得了成功！图像仍然是垂直堆叠的，我希望它们都是水平排列的。包括间距，我想我遗漏了一块。现在只是尺寸问题，它们显示为原始尺寸（460px），我希望它们更易于管理，比如（30px）。我认为调整向量本身的大小是更好的做法，但我喜欢有详细的图像。您可以将
width:30px
添加到sm类；）不幸的是，这对我来说没有任何改变，即使我把宽度改为30px，它们仍然是全尺寸的（@KevinP.看看你是否在图像标签中指定了宽度和高度？你也可以添加
！important
来强制值我们正在取得进展！图像仍然是垂直堆叠的，我希望它们都是水平排列的。包括间隔，我想我缺少了一块。现在只是大小问题，它们是di显示为原始大小（460px），我希望它们更易于管理，如（30px）。我想调整向量本身的大小是更好的做法，但我希望有详细的图像您可以将
width:30px
添加到sm类；）不幸的是，这对我来说没有任何改变，即使我将width:30px设置为全尺寸：（@KevinP.查看您是否在图像标记中指定了宽度和高度？您还可以添加
！important
以强制值我似乎无法解决此问题