0

estoy haciendo un pricing grid con 3 secciones, en el cual al querer alinear los elementos (en este caso textos) adentro de estos le coloqué un display:flex al elemento padre, luego le cambié la dirección con un flex-direction:column, por lo que la dirección de las axis cambia, ahora quiero que los textos esten alineanos verticalmente por lo que le coloque justify-content:center pero no hace nada, no me los alinea y no tengo idea de por qué, podria hacer el pricing grid con grid si, pero quiero practicar esto de flex anidados

<div class="prices-container">
            <div class="prices-options">
                <div class="prices">
                        <h3>Plan 1</h3>
                        <p>Get the console for FREE!</p>
                        <p>Thats right we are NOT JOKING, you can have the console that you want for 0.00$</p>
                        <p>You think we're joking? Test us out NOW</p>
                        <a class="btn-price" href="#">Get this deal!</a>
                </div>
                <div class="prices">
                        <h3>Plan 2</h3>
                        <p>Get the console for twice the price</p>
                        <p>You get ONE console for the price of two!</p>
                        <p>What can be better than that?</p>
                        <a class="btn-price" href="#">Get this deal!</a>
                </div>
                <div class="prices">
                        <h3>Plan 3</h3>
                        <p>You gave your console to us</p>
                        <p>Yes yes, too amazing to be true</p>
                        <p>If your console is new, better!</p>
                        <a class="btn-price" href="#">Get this deal!</a>
                </div>
            </div>
        </div>




  .prices-container {
        display:flex;
        justify-content: center;
        align-items:center;
        margin-top: 20px;
    }
    
    .prices-options {
        flex-basis: 60%;
        display:flex;
        justify-content: center;
    
    }
    
    .prices {
        flex-basis: 700px;
        height: 360px;
        background: rgba(0, 0, 0, 0.185);
        margin: 0px 10px;
        border: 3px solid rgba(0, 0, 0, 0.356);
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* No funciona */
      
    }
    
    
    
    .btn-price {
        background: rgba(230, 129, 129, 0.5);
        display: block;
        padding: 10px 5px;
        width: 70%; 
        border: 1px solid #000;
        text-decoration: none;
        color: #000;
        border-radius: 5px;
        margin-top: auto;
        align-self: center;
        text-align: center;
    }
    
    .btn-price:hover {
        background: rgb(0,0,0,.3);
    }
6
  • ¿Podrías explicar mejor el problema por favor?
    – user128299
    el 6 abr. 2021 a las 15:57
  • agrega text-align: center; en la class .prices. pero si queres que se centren con flexbox usa align-items: center; y no justify-content: center;
    – Roy
    el 6 abr. 2021 a las 16:03
  • Lo que busco hacer es que los elementos o flex-items '<p>' esten alineados dentro del contendor padre o flex-container que en este caso serian los '.prices' para eso coloqué 'justify-content:center' pero no los alinea en medio del contendor
    – edmblue
    el 6 abr. 2021 a las 16:06
  • align-items los alinea horizontalmente, mas no veticalmente. es el margin-top:auto del btn-price el que causa conflicto, pero me preguntaba si hay una manera de alinearlo tal y como tengo el codigo
    – edmblue
    el 6 abr. 2021 a las 16:08
  • ahora si te pude entender, ahora te subo la respuesta detallada!
    – Roy
    el 6 abr. 2021 a las 17:27

2 respuestas 2

0

lo que Tenes que hacer es separarlos por mas <div> así usas el div del medio que contendrán la etiqueta <p> darle un valor de width: 100%; para que abarquen todo el contenedor de .prices.

te dejo el código de solución.

.prices-container {
        display:flex;
        justify-content: center;
        align-items:center;
        margin-top: 20px;
    }
    
    .prices-options {
        flex-basis: 60%;
        display:flex;
        justify-content: center;
    
    }
    
    .prices {
        flex-basis: 700px;
        height: 360px;
        background: rgba(0, 0, 0, 0.185);
        margin: 0px 10px;
        border: 3px solid rgba(0, 0, 0, 0.356);
        padding: 10px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .price-header {
        align-self: flex-start;
        width: 100%;
        text-align: center;
    }
    .price-body {
        width: 100%;
        text-align: center;
    }
    .price-footer {
        width: 100%;
        text-align: center;
        align-self: flex-end;
    }
    .btn-price {
        background: rgba(230, 129, 129, 0.5);
        display: block;
        padding: 10px 5px;
        width: 70%; 
        border: 1px solid #000;
        text-decoration: none;
        color: #000;
        border-radius: 5px;
        margin: 0 auto;
    }
    
    .btn-price:hover {
        background: rgb(0,0,0,.3);
    }
<div class="prices-container">
    <div class="prices-options">
        <div class="prices">
            <div class="price-header">
               <h3>Plan 1</h3> 
            </div>
            <div class="price-body">
                <p>Get the console for FREE!</p>
                <p>Thats right we are NOT JOKING, you can have the console that you want for 0.00$</p>
                <p>You think we're joking? Test us out NOW</p>
            </div>
            <div class="price-footer">
               <a class="btn-price" href="#">Get this deal!</a> 
            </div>
        </div>
        <div class="prices">
            <div class="price-header">
               <h3>Plan 2</h3> 
            </div>
            <div class="price-body">
                <p>Get the console for twice the price</p>
                <p>You get ONE console for the price of two!</p>
                <p>What can be better than that?</p>
            </div>
            <div class="price-footer">
               <a class="btn-price" href="#">Get this deal!</a> 
            </div>
        </div>
        <div class="prices">
            <div class="price-header">
               <h3>Plan 3</h3> 
            </div>
            <div class="price-body">
                <p>You gave your console to us</p>
                <p>Yes yes, too amazing to be true</p>
                <p>If your console is new, better!</p>
            </div>
            <div class="price-footer">
               <a class="btn-price" href="#">Get this deal!</a> 
            </div>
        </div>
    </div>
</div>

cualquier cosa me avisas, suerte!

0
0

El problema es que justify-content: center no se aplica ya que los elementos .prices están ocupando todo el espacio vertical disponible.

Una posible solución seria agregar un padding a .prices. Esto creará un espacio alrededor del contenido, permitiendo que justify-content: center funcione como se esperaba.

.prices {
    flex-basis: 700px;
    height: 360px;
    background: rgba(0, 0, 0, 0.185);
    margin: 0px 10px;
    border: 3px solid rgba(0, 0, 0, 0.356);
    padding: 50px 10px; /* Añade un padding vertical */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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.