2

Veran, algo falla al utilizar etiquetas table, pues los textos se me ponen a diversas alturas, lo que afecta incluso a imagenes.

Codigo html:

<table>
<tr>
{% for alfa in categoria %}
<td>
<img src="{% static alfa.foto %}"/>
<br>
<a href='http://127.0.0.1:8000/filtro_categoria/{{alfa.id}}'>{{alfa.nombre}}:<br/>{{alfa.descripcion}}</a>
</td>
{% if forloop.counter|divisibleby:cantidad %}
</tr><tr>
{% endif %}
{% endfor %}
</tr>
</table>

Código CSS:

table{
    color: #CCCCCC;
    display: block;
    text-align: center;
    border-collapse: separate;
    border-spacing: 5px;
}

Resultado: introducir la descripción de la imagen aquí

¿Como hago para que todas las imagenes se pongan a la misma altura?

2 respuestas 2

1

Sé que pones que has encontrado una solución que funcionará usando valign, pero te recomendaría que no la usaras y en su lugar hicieras lo mismo sólo con CSS.

El atributo valign se considera obsoleto a partir de HTML5 (fuente); Esto quiere decir que aunque funcione ahora, no se garantiza que vaya a funcionar en el futuro (porque se le dejará de dar soporte). Sería mejor usar vertical-align en el CSS.

Así, el ejemplo que pones no cambiaría su HTML sino el CSS:

table td {
    vertical-align:top;
}
0

Edito: Al fin he encontrado la solución:

<td valign="top">
<img src="{% static alfa.foto %}"/>
<a href='http://127.0.0.1:8000/filtro_categoria/{{alfa.id}}'>{{alfa.nombre}}:<br>{{alfa.descripcion}}</a>
</td>

Lastima que al ser una variable interna de la etiqueta , valign no se puede pasar al css, obligando a ponerselo a cada etiqueta. ¿Alguien sabe si hay un modo alternativo con css? Probe algo llamado "vertical-align", pero fallo.

2
  • Podrías intentarlo Bootstrap, tiene un componente que podría ser justo lo que quieres.
    – toledano
    Commented el 13 may. 2017 a las 13:34
  • Esta respuesta contiene dos imprecisiones: 1) el uso de valign no se recomienda; y 2) valign sí se puede pasar al CSS usando vertical-align.
    – Alvaro Montoro
    Commented el 13 may. 2017 a las 13:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.