In my website, I’m trying to get “display: inline-block” to work with my images to put them next to each other, but they display over top of each other still, and slightly off-center for some reason. Any help?
My code:
<style>
.inline {
display: inline-block;
}
</style>
--snip--
<div style="text-align:center" class="inline">
<img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>
<div style="text-align:center" class="inline">
<img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>
The result:
The two images overtop each other, slightly off-center
I tried putting the class in just the images, which fixed the being off-center issue, but they were still on top of each other.
I also put both the divs inside another “parent” div, which did nothing.
I then put the class in only the divs, which also fixed nothing.
These were all done in an attempt to fix the problem.
AutisticJar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.