0

Buen día,

Deseo alinear el texto verticalmente de una tabla que viene siendo 'impresa' por medio de un .php por ajax, he intentado ponerle el atributo a las etiquetas td con:

valign="center" (leí que ya no funciona en HTML5, por ende se supone que por eso no funcinó)

intenté ponerle las clase de bootstrap (según leí en https://getbootstrap.com/docs/4.0/utilities/vertical-align/)

class="align-middle" class="align-text-middle"

intenté con css

td { vertical-align: center: }

y también

td { vertical-align: middle; }

nada funciona, la que si sirve es ponerle el atributo a las td como align="center" que lo hace horizontalmente, actualmente el codigo lo tengo como lo dejo abajo después de realizar una consulta mySql, me pregunto si no esta funcionando por que viene la tabla desde un php y no esta plasmada como tal en el .html, eso tiene que ver?

<?php
while($row=mysqli_fetch_array($result))
{
    echo '<tr>';
    echo '<td align="center">'.$row['id'] . '</td>';
    echo '<td align="center">'.$row['tipo_solicitud'] . '</td>';
    echo '<td align="center">'.$row['nombre'] . '</td>';
    echo '<td align="center">'.$row['celular'] . '</td>';
    echo '<td align="center">'.$row['direccion'] . '</td>';
    echo '<td align="center">'.$row['email'] . '</td>';
    echo '<td align="center">'.$row['comentarios'].'</td>';
    //se pone // para indicar que es una ruta nueva, si no toma la carpeta actual y concatena con la ruta en MySql
    echo '<td align="center"><a href="//'.$row['ruta_foto1'].'" target="_blank">Ver foto1</a></td>';
    echo '<td align="center"><a href="//'.$row['ruta_foto2'].'" target="_blank">Ver foto2</a></td>';
    echo '<td align="center" bgcolor="#dd425c">' . $row['estado'] . '</td>';
    echo '<td align="center"><button id="'.$row['id'].'" onclick="eliminar_solicitud_revision_tecnica_estado_solicitado(this)" class="btn btn-danger">Eliminar solicitud</button></td>';
    echo '<td align="center"><button id="'.$row['id'].'" onclick="confirmar_visita(this)" class="btn btn-default">Confirmar visita</button></td>';
    echo '</tr>';
}
?>
3
  • Hola, ¿Esos td los estás creando dentro de <table><tbody> ... </tbody></table>?
    – Ferni
    el 1 jun. 2018 a las 20:17
  • @Ferni si, antes de eso las abro con echo y cierro despues, solo que oilvide ponerlo en la pregunta original el 1 jun. 2018 a las 20:49
  • El class="align-middle" de Bootstrap debería funcionar si tienes bien vinculado la librería en tu proyecto.
    – Ferni
    el 1 jun. 2018 a las 20:51

2 respuestas 2

0

considero que respetaste la estructura y eso de ahí esta adentro de un no?.

Debería bastar con la clase "align-middle". Que raro que no te lo esta tomando. Probaste ponerle un alto(height) fijo? por ejemplo: "height: 200px;"

En el caso que lo quieras hacer directo con css:

"vertical-align: center;" no te va a funcionar si no me equivoco. pero si te lo debería tomar con: "vertical-align: middle;".

Juga con el alto de la celda y sino vemos con mas detalle.

En el caso que no te ande con estas cosas pasa como queda el html final (no solo la parte de php sino como queda maquetado).

Saludos!

0

Puedes usar flexbox para centrar cualquier elemento respecto a su contenedor padre ( sea cual sea )

div {
  background-color: black;
  color: white;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.div1 {
  width: 300px;
  height: 200px;
}

.div2 {
  width: 150px;
  height: 100px;
}

.div3 {
  width: 90px;
  height: 133px;
}
<div class="div1">
  <p>Texto</p>
</div>

<div class="div2">
  <p>Texto</p>
</div>

<div class="div3">
  <p>Texto</p>
</div>

Con justify-content centra horizontalmente y align-items centra verticalmente, siempre que la dirección sea row, en caso de ser column se invierto y justify-content pasa a ser verticalemnte y align-items horitonalmente

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.