un elemento div al lado de otro div con html y css y ponerlos en el centro de otro div in javascript

Para lograr esto, primero hay que crear una div contenedor que contenga las dos divs a posicionar al lado del otro. Luego, se puede utilizar flexbox para centrar este contenedor en otra div contenedora.

Aquí hay un ejemplo de código HTML y CSS para conseguir esto:


<div class="container">
  <div class="left">Contenido izquierdo</div>
  <div class="right">Contenido derecho</div>
</div>
122 chars
5 lines


.container {
  display: flex;
  justify-content: center; /*centra horizontalmente*/
  align-items: center; /*centra verticalmente*/
  width: 100%;
  height: 100%;
}

.left, .right {
  width: 50%;
  height: 100%;
}

.left {
  background-color: red;
  float: left; /*hace que la div flote a la izquierda de la otra*/
}

.right {
  background-color: blue;
  float: left; /*hace que la div flote a la izquierda de la otra*/
}
422 chars
23 lines

Luego, en Javascript, se puede obtener la div contenedora padre y añadirle la clase "container" para que se apliquen los estilos de flexbox y se centren las dos divs.


index.tsx
const containerDiv = document.getElementById("container-div"); // obtener div contenedor padre
containerDiv.classList.add("container"); // añadir clase "container" para centrar las divs internas
195 chars
3 lines

similar javascript code snippets

create a popup dialogue in javascript

how to change the border of an element in javascript

create an date picker in javascript

render a react calculator in javascript

center a div in javascript

create a carousel in html in javascript

do a barrel roll in javascript

convert div to image in javascript

blue coloured cta in javascript

render a typeface in javascript

related categories

html

css

javascript