[SOLUCIONADO] Alternativa a etiqueta <center>

[davidddp]

He leído mucho de que la etiqueta <center> está en desuso y que no se debe de utilizar. Pero la verdad es que es super util y la única que consigo que funcione con todo lo que incluya.

Así que necesito conseguir lo mismo que con <center></center>. En párrafos es fácil con align center pero el problema es que tengo videos con la etiqueta <video></video> y no consigo centrarlo en mi web de ninguna de las maneras, he tratado de alinearlo con <p> y atributo align, con css e incluyéndolo dentro de un <div class="centrar"> y nada. La única manera es con <center>.

Alguna idea? Me gustaría alguna alternativa a center que funciones siempre incluyas lo que incluyas, pero bueno en especial para videos.

Gracias

[PHPeros]

Está obsoleta porque se puede hacer con CSS. Para centrar párrafos, divs u otros elementos que se comportan como bloques puedes hacer:

Código CSS:

margin: 0 auto;
 

Para más detalles aquí tienes una guía completa.

[davidddp]

Pues lamento decirle que no funciona, lo puedes ver usted mismo en http://158.49.247.14/caceresvirtual/?page_id=1128

He usado css y he creado:

Código CSS:

.centrar {
    margin: 0 auto;
}
 

y lo he llamado así:

Código HTML:

<div class="centrar">
<video src="videos/Bohonal.mp4" poster="wp-content/uploads/Logos3.jpg" controls="controls" width="600" height="337"></video>
</div>
 

Esta bien?

[fede5426]

Iniciado por davidddp

Pues lamento decirle que no funciona

Eso es porque no tiene un ancho definido, por lo que tu "div.centrar" ocupa el 100% de su contenedor. Intenta poniéndole un width: 600px; (que es el ancho del video) a ese div. O en su defecto aplicale el margin directamente al video.

1° Solución:

Código CSS:

.centrar {
    width:600px;
    margin: 0 auto;
}
 

2° Solución:

Código HTML:

<video src="videos/Bohonal.mp4" poster="wp-content/uploads/Logos3.jpg" controls="controls" width="600" height="337" class="video"></video>
 

Código CSS:

.video{
    margin: 0 auto;
}
 

Saludos

[davidddp]

Gracias, he usado la segunda solución ya que la primera me hace conflicto con con la clase que me hace responsive el video class="uk-responsive-width".

Así que he usado tal que así:

Código HTML:

<video class="uk-responsive-width centrar" src="videos/Bohonal.mp4" poster="wp-content/uploads/Logos3.jpg" controls="controls" width="600" height="337"></video>
 

¿Estaría bien usar así las dos clases juntas? La verdad que funcionar funciona.

[fede5426]

Iniciado por davidddp

¿Estaría bien usar así las dos clases juntas? La verdad que funcionar funciona.

Si, está bien.. podes asignar más de una clase sin problemas.