Images and texts are displayed at different heights

Question

Images and texts are displayed at different heights

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

You see, something fails to use table tags, because the texts are put at different heights, which affects even images.

HTML code:

<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>

CSS Code:

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

Result:

How do I make all images look the same?

html django

asked by Miguel Alparez 13.05.2017 в 11:37

source

2 answers

0

Edit: I finally found the solution:

<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>

Too bad that being an internal variable of the tag, valign can not be passed to the css, forcing it to put it on each tag. Does anyone know if there is an alternative mode with css? Try something called "vertical-align", but fail.

answered by 13.05.2017 в 13:59

Problems with update android studio 2.1.3 Concatenation in os.chdir

score 1 · Accepted Answer

I know you say you have found a solution that will work using valign , but I would recommend that you not use it and instead do the same with CSS only.

The valign attribute is considered obsolete from HTML5 ( source ); This means that even if it works now, it is not guaranteed that it will work in the future (because it will stop supporting it). It would be better to use vertical-align in CSS .

So, the example that you put would not change its HTML but the CSS:

table td {
    vertical-align:top;
}