Question

社会！我无法为我的一些图像缩小格式。

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>

CSS

.sm {
    display: block;
}

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

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

图像垂直排列在页面左侧，全部都是原始大小。据我所知

float：left;

用于使它们水平？

此外，我希望他们以页面为中心，但保证金：自动;也没有改变任何事情。

编辑：我想在每张图片之间留一些间距，是否有替代

＆安培; NBSP;

Answer 1

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

.sm {
    display: block;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: flex;
    align-items: center;
    justify-content: center;
}
.socialmedia > a {
display:inline-block;

}

<footer>
    <section class="socialmedia">
        <a href=""><img src="https://www.wired.com/images/icons/social-facebook-square-blue.svg" class="sm"></a>
        <a href=""><img src="http://www.persianfootball.com/forums/images/BP-White/misc/icon-twitter.png" class="sm"></a>
        <a href=""><img src="http://www.downvids.net/images/inslogo.png" class="sm"></a>
    </section>
</footer>

Answer 2

你可以简单地做到这一点（不需要浮动和左侧属性）：

pyagent proxy start

img.sm {
  max-width:30px;
  width:100%;
  margin:5px;
}

/* Add a hover effect */

img.sm:hover {
  opacity: 0.7;
}

.socialmedia {
  display: block;
  text-align:center;
}

Answer 3

如何将样式更改为：

num_divisions = len(percentage_list)

remainder = 100 - percentage_value * num_divisions

# Replace all 1's in someDict with percentage value
for i, key in enumerate(filter(lambda k: someDict[k] == 1, someDict)):
    extra = int(remainder/(num_divisions - i))

    someDict[key] = percentage_value + extra

    remainder -= extra

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

Answer 4

无需使用浮动:) https://jsfiddle.net/L5eyd4bv/1/

.sm {
     display: inline-block;
}

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

.socialmedia {
    text-align: center;
}

在父元素上使用text-align，您只需使用display: inline-block;。

我还在您的.sm元素上添加了<a>课程来促进这一点。

Answer 5

请注意，您希望图像并排显示，但是您在<div> <h1></h1> <p></p> </div>元素上使用float，这是容器而不是图像。因此，您应该将CSS更改为：

.socialmedia

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

.sm {
    display: block;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    left: 45%;
}

.socialmedia img {
    float: left;
}

img {
	  border:1px solid red;
    height:50px;
    width:50px;
}

这里有JSFiddle：https://jsfiddle.net/e7j68Lvf/

如果您想在图像之间留出一些空间，可以使用<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>，如下所示：

margin

.socialmedia img {
    float: left;
    margin-right: 20px;
}

.sm {
    display: block;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    left: 45%;
}

.socialmedia img {
    float: left;
    margin-right: 20px;
}

img {
	  border:1px solid red;
    height:50px;
    width:50px;
}

这里有JSFiddle：https://jsfiddle.net/e7j68Lvf/1/

现在，为了居中，您可以为<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>元素提供一些宽度，然后在其上使用.socialmedia，如下所示：

margin: auto

.socialmedia {
    display: block;
    left: 45%;
    margin: auto;
    width: 50%;
}

.sm {
    display: block;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    left: 45%;
    margin: auto;
    width: 50%;
}

.socialmedia img {
    float: left;
    margin-right: 20px;
}

img {
	  border:1px solid red;
    height:50px;
    width:50px;
}

在这里，你有JSFiddle的全部内容：https://jsfiddle.net/e7j68Lvf/2/

Answer 6

使其水平的是display：block

您可以使用以下代码。

“text-align”将在中心找到元素。

用于间距使用边距或填充。

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

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

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

祝你好运，祝你有愉快的一天！

麻烦格式化CSS中的图像

6 个答案: