Podrías intentar hacer algo así (he robado las imágenes del blog.elhacker.net):
<p>Texto por arriba</p>
<div class="padre">
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
</div>
<p>Texto por abajo</p>
Y de reglas de estilo, podrías hacer algo así:
div.padre{width: 100%;border: 1px solid black;text-align: center;}
div.padre img{max-width: 23%; margin:2px;}
El 23% nunca hay que ponerlo al 25% porque algunos navegadores te pondrán la imagen de más a la derecha abajo. Además también he puesto un margin de 2 píxeles. Esto igual en navegadores con dispositivos muy pequeños también haga saltar la última imagen abajo (pero esto ya lo tienes que estudiar y con las media queries corregirlo a tu manera). Yo por ejemplo, en un smartphone no dejaría las imágenes en horizontal, porque no se ven, las dejaría una debajo de la otra.
Pongo un <div> padre y dentro las imágenes porque es posible centrarlas, ya que estas son elementos en línea y no en bloque, como el <div>. Así siempre quedarán bien centradas dentro de un div que ocupa todo el ancho de la pantalla.
Autor
! Si necesitáis algo más de código me decís.
En línea
