How to center images horizontally with text? - html

Question

I am working on a site but the centering of my images horizontally in the footer isn't going very well.
When you make the screen smaller then 620px or something like that, then I want to center the text. But also the images.. With the images I mean the 5 icons in the third table and the picture in the fourth table.
If you try to decrease the width of the screen you will see that the images are not perfect aside the text.
So my question is.. How can I center the images horizontally with the text together when the text is aligned in the center?
Here is my footer: https://jsfiddle.net/ThomasPereira/L7dz7d4b/
I think that my mistake is here under -->
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
}

Answer 1

UPDATED
I just edited your fiddle a bit and managed to achieve what you wanted
https://jsfiddle.net/L7dz7d4b/2/
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
#footer #group a #icon {
width: 20px;
height: 20px;
margin: 5px;
float:none;
}
.opmaak{
display:flex;
margin:0 auto;
width:100px;
}
}

Answer 2

Try to make images display:inline-block instead of float:left
Smth. like:
.opmaak a img {
display:inline-block;
vertical-align:-10px; /* value to nicely show img along text, */
}
P.S. You should have only unique ids. Use class instead of id if you have two elements with the same id.

Answer 3

Heres a simple guide
try to use classes rather than ids for things you need to use more than once. Using inline-block is very helpful, but keep in mind, things can get pretty messy if your css isn't good. For example, 2 inline-block elements will not align correctly if one has text, and the other doesn't.
Just some things to keep in mind.