image redirect Centered



我是新来的,我不能将我的社交重定向图像对齐到"联系我"&;头。文本对齐不起作用,我为我的问题找到的其他解决方案只是把它垂直排列。

<link rel="stylesheet" href="styles.css">
<style>
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
display: inline-block;
position: relative;
}
.resize {
text-decoration: none;
width: 128px;
height: 128px;
display: inline-block;
}
</style>
</head>
<body>
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
</body>
</html>

调整.feature figure的边距。我改变了图片的大小,并为它们添加了边框,这样我就可以看到发生了什么。

.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
border: 1px solid #ccc;
display: inline-block;
margin: 0 8px;
}
.resize {
text-decoration: none;
width: 64px;
height: 64px;
display: inline-block;
}
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>

最新更新