0

necesito ayuda al alinear un div, tengo 2 divs intento alinearlos verticalmente y no quedan: en los divs quiero poner una imagen de una persona en primer plano, y una frace que aya dicho al lado de la imagen (La imagen a la izquierda y el texto a la derecha) le agrege la decoracion de la esquina doblada como una hoja de papel y le agrege una sombra muy leve que apenas se nota, ahora quiero que los dos divs esten separados y centrados de todos los lados de forma de que quede todo simetrico (Pongan en patalla completa el codigo para verlo)

Codigo:

				.toping{
					width: 100%;
				}
				.presentation {
					float: left;
				-webkit-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
				-moz-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
					box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  					background: none repeat scroll 0 0 #97C02F; /* color de fondo */
   				    color: #FFFFFF; /* color de texto */
                    margin: 2em auto;
                    overflow: hidden;
                    padding: 1em 1.5em;
                    position: relative;
                    width: 480px; /* ancho */
				}
       		    .presentation:before {
                 		 background: none repeat scroll 0 0 #658E15; /* color esquina */
                 			 border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
                 		 border-style: solid;
                	  border-width: 0 16px 16px 0;
               		   content: "";
                 		 display: block;
                		  position: absolute;
 						  right: 0;
  						  top: 0;
 						  width: 0;
				}
				.presentation2 {
					float: left;
					-webkit-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
					-moz-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
					box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  					background: none repeat scroll 0 0 #97C02F; /* color de fondo */
   				    color: #FFFFFF; /* color de texto */
                    margin: 2em auto;
                    overflow: hidden;
                    padding: 1em 1.5em;
                    position: relative;
                    width: 480px; /* ancho */
				}
       		    .presentation2:before {
                 		 background: none repeat scroll 0 0 #658E15; /* color esquina */
                 			 border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
                 		 border-style: solid;
                	  border-width: 0 16px 16px 0;
               		   content: "";
                 		 display: block;
                		  position: absolute;
 						  right: 0;
  						  top: 0;
 						  width: 0;
				}
		<div class="toping">
			<div class="presentation">
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>				
			</div>
			<div class="presentation2">
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>				
			</div>

2
  • Déjame ver si entendí, quieres que estén centrados ambos divs tanto vertical como horizontalmente? Commented el 22 jul. 2019 a las 22:53
  • @BenderPaisa correctamente
    – Zerotet
    Commented el 22 jul. 2019 a las 23:00

1 respuesta 1

0

Lo que se me ocurre es meter los dos div dentro de otro div, luego utilizar el display: flex en el div.toping para centrar el div creado que contiene las dos tarjetas, con esto se centrarán siempre en relación al div.toping.

Revisalo en pantalla completa.

.toping{
  width: 100%;
  display: flex;
}

.content{
  margin: auto;
}

.presentation {
  float: left;
  -webkit-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  -moz-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  background: none repeat scroll 0 0 #97C02F; /* color de fondo */
  color: #FFFFFF; /* color de texto */
  margin: 2em auto;
  overflow: hidden;
  padding: 1em 1.5em;
  position: relative;
  width: 480px; /* ancho */
}

.presentation:before {
  background: none repeat scroll 0 0 #658E15; /* color esquina */
  border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
  border-style: solid;
  border-width: 0 16px 16px 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.presentation2 {
  float: left;
  -webkit-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  -moz-box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  box-shadow: 4px 6px 52px -9px rgba(0,0,0,0.34);
  background: none repeat scroll 0 0 #97C02F; /* color de fondo */
  color: #FFFFFF; /* color de texto */
  margin: 2em auto;
  overflow: hidden;
  padding: 1em 1.5em;
  position: relative;
  width: 480px; /* ancho */
}

.presentation2:before {
  background: none repeat scroll 0 0 #658E15; /* color esquina */
  border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
  border-style: solid;
  border-width: 0 16px 16px 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}
<div class="toping">
  <div class="content">
    <div class="presentation">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>				
    </div>
    <div class="presentation2">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>				
    </div>
  </div>
</div>

2
  • Y como puedo dejar un espacio entre esos dos divs?
    – Zerotet
    Commented el 22 jul. 2019 a las 23:41
  • @BrianMartinez pues aplica un margin a alguno de los dos Commented el 23 jul. 2019 a las 13:21

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.