0
233
ViewsMover al centro del sitio web (si es posible, ajusta automáticamente el tamaño en dispositivos móviles)
lo siento por el mal inglés. ¿Alguna idea para mover esto al centro sin usar márgenes, etc.? Tal vez hay otras formas. 
¿Y es posible que la imagen y el video se ajusten automáticamente en cualquier pantalla móvil? Debajo del código que usé:
HTML
<div id="tv_container"> <iframe width="720" height="480" src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>CSS
#tv_container { width: 720px; height: 480px; position: relative; } #tv_container:after { //frame content: ''; display: block; background: url('../home-img/framevid(4).png') no-repeat top left transparent; width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 10; } #tv_container iframe { //video position: absolute; top: 30px; left: 40px; z-index: 5; }
·
Santiago Trujillo
3 answers
Answer question0
Use text-align: center a su estilo de objeto.
No sé qué objetos desea centrar, pero debería funcionar con todos ellos.
·
Santiago Trujillo
Report
0
Acabo de agregar elementos CSS y HTML a través de JS. Aquí está mi código:
#tv_container { width: 720px; height: 480px; position: relative; } #tv_container:after { content: ''; display: block; background: url('../home-img/framevid(4).png') no-repeat top left transparent; width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 10; } #tv_container iframe { position: absolute; top: 30px; left: 40px; z-index: 5; } .frame { display: flex; justify-content: center; } <body> <section class="frame"> <div id="tv_container"> <iframe width="720" height="480" src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </section> </body>
·
Santiago Trujillo
Report
0
Puede usar 3 formas de centrar la imagen:
- Establecer su margen en automático
margin: 0px auto;- Use cuadrículas y use el siguiente código en su CSS:
display: flex; justify-content: center; // justify-self: center; // justify-items: center; // align-items: center; // ...- La forma en que no recomiendo usar hosts de posición es colocar una etiqueta como etiqueta principal con una posición igual o relativa y la otra etiqueta (foto) como etiqueta secundaria y con cuatro direcciones principales de su posición establecida en la página.
En cuanto al tamaño de la imagen en diferentes tamaños de página, debo decir que configurar el ancho de la página no debe ser usando píxeles y debes usar el porcentaje de la siguiente manera:
width: 80%;
·
Santiago Trujillo
Report
Answer question