1

Estoy realizando una pagina web en la cual se ha incluido una sección de listas, las cuales deben mostrar al usuario listas de dos en dos, es decir dos que los divs que contiene a las listas se muestren de dos en dos y centradas.

El problema que tengo es que los divs de las listas tienen un width: 400px; y deben verse centradas de acuerdo a cada pantalla posible, menos para dispositivos móviles como teléfonos celulares.

La clase css que contiene los estilos de los divs de las listas es la siguiente

 .contenedor_listas_recetas{
  width: 400px;
  margin: 25px;
  box-shadow: 0px 0px 6px 0px rgba(184,184,184,1);
  border-radius: 10px;
  height: 178px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  float: left;
}

EL div padre que contiene al div contenedor_listas_recetas tiene un width de 100%

esta es la plantilla

     <div class="contenido">

  <div *ngIf="vista_principal===4" class="listas_Recetas">
      <div class="header_listas">
          <div (click)="atrasRecetas2()" style="width: 10%;
                  float: left;">
            <img src="/assets/img/icons-26.svg" style="width: 100%; ">
          </div>
          <div class="col" id="misl" style="    width: 90%;
                  float: right;
                  margin-top: 20px;">{{lista_recetasin.name}}
          </div>
        </div>
      <div class="contenedor_listas_recetas" *ngFor="let item of lista_recetasin.ads"[ngStyle]="{'background-image': 'url('+ item.picture_for_mobile+')'}" style="height: 190px;"
      (click)="ConsultarReceta(item)">
      <div style="overflow:auto; height:190px;">
          <div class="footer_listas" style="margin-top: 150px;">
              <div class="derechas_listas" style="width: 75%;">
                  <div class="titulos_l" style="color: #666;">
                      {{item.name}}
                  </div>
                  <div class="subtitulos_l">
                      {{lista_recetasin.name}}
                  </div>
              </div>
              <div class="izquierda_listas" style= "background: #fff;width: 25%;text-align: center;padding-top: 10px;">
                  <span *ngIf="item.recipe_items_number>1">{{item.recipe_items_number}} items</span>
                  <span *ngIf="item.recipe_items_number===1">{{item.recipe_items_number}} item</span>
              </div>

          </div>
      </div>
  </div>
  <div class="footer_listas2">
  </div>
  </div>
</div>

Sin embargo me han pedido que el cambio lo realice unicamente en el archivo css sin cambiar la propiedad width: 400px de la clase contenedor_listas_recetas

Así esta la vista actual de mis divs

introducir la descripción de la imagen aquí

Saben como puedo hacer para que se centren sin importar el tamaño de un pantalla, excepto en teléfonos móviles.

Gracias

3 respuestas 3

1

Ya probaste con flexbox:

 .contenido {
   display: flex;
   justify-content: center;
 }
1
  • pues si esa fue primera opción y lo que hizo fue colocarme en linea todas los divs, es decir que no se mostro de dos en dos el 16 ago. 2019 a las 1:59
0

te paso esto.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>pruebas CSS</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div style="width: 100%;">
		<div style="width: 400px;background-color: yellow; margin-left: calc(50% - 200px)">
			MIS LISTAS
		</div>
	</div>
</body>
</html>

Prueba a hacerlo mas grande y mas pequeño, a ver si es lo que quieres.
El 'truco' esta en el div que contiene todo, y hace el 100%.
El otro div se que hace 400px, entonces ya solo son matematicas.
El centro es el 50% de la pantalla, menos la mitad de lo que mide mi contenedor, que son 200px.
Espero te sirva ;)

1
  • muchas gracias con esa pauta logre hacerlo el 16 ago. 2019 a las 15:32
0

En tu caso, una de las opciones más antiguas para el centrado creo que puede funcionarte. Sobre el contenedor superior .contenido se ha de establecer:

  1. Un tamaño estático (fácil ya que el contenido tiene un tamaño estático también width: 900px;).
  2. Un margen lateral izquierdo al 50% de la pantalla (margin-left: 50%;).
  3. Un desplazamiento inicial izquierdo negativo de la mitad del tamaño del contenedor (left: -450px;).
  4. Un posicionamiento relativo de contenedor (position: relative;).

Resumiento, quedaría algo así:

.contenido {
    width: 900px;
    margin-left: 50%;
    left: -450px;
    position: relative;
}

Con eso debería funcionarte, aunque seguro que hay soluciones mejores.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.