I want to do the layout described here
https://github.com/robberfree/frontend-problem/tree/master/img-with-text
Is it possible to finish the task by using CSS only? I have tried some ways. But It's hard to keep a fixed margin between the img and text.
For the flex layout.The span's width may larger than the text real width like this:
.img-text {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.img-text img {
width: 32px;
object-fit: contain;
margin-right: 8px;
}
.img-text span {
text-align: center;
}
<p class="img-text">
<img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
<span>unexpected happened,Something unexpected happened
Something unexpected happened,Something unexpected happened,Something unexpected happened
</span>
</p>