如何解决如何在文本顶部获取图标
我正在尝试在文本顶部获取图标(png 文件)并使其看起来像那样。我还想让它保持响应。
但是我的图标在一边,我似乎无法弄清楚如何做到这一点。尝试调整填充、项目对齐、更改位置设置等。我可能可以使用顶部和左侧命令调整图标位置,但这会破坏响应能力。有什么帮助吗?
.icon {
width: 100px;
height: auto;
margin: 0 0 15px 0;
}
.rows {
display: flex;
flex-direction: row;
width: 95%;
top: 13em;
float: right;
position: relative;
border-style: solid;
}
.feature {
text-align: center;
line-height: 24px;
min-width: 31%;
}
.feature h3 {
color: #f98673;
margin-bottom: 10px;
}
.feature p {
color: #fff;
margin-bottom: 0;
}
<div class = "rows">
<div class="feature">
<img src="group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
<div class="feature">
<img src="list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
<div class="feature">
<img src="chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
解决方法
您可以通过将图标和下面的文本包装在另一个 div 中并像这样应用 flex 来实现此目的:
<div style="display:flex;flex-direction:column">
<img src="group.png" class="icon" />
<h3>Watch or listen together</h3>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。