Módulo de diseño CSS3 FlexBox - Alinear el elemento de nivel en línea cuando es un elemento Flex

Question

Dado que tengo este código HTML:

<div>
    <h2>What is Lorem Ipsum?</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#">Read more</a>
</div>

y CSS:

div {
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: 1px solid #DDD;
    border-radius: 10px;
}

div h2 {
    font-size: 1.2307em;
    text-align: center;
}

div p {
    flex: 1;
    margin: 0.7692em 0;
}

¿Cómo puedo diseñar el anclaje para que esté centrado horizontalmente?

Answer 1

Establecer align-self: center en el código <a> (con versiones específicas del navegador de la propiedad, por supuesto, por supuesto).Los elementos en línea se convierten en elementos flexibles, por lo que no es necesario una envoltura de nivel de bloque alrededor de <a>.

Dicho esto, si va a usar FlexBox, descubrirá rápidamente que a menudo requiere divisiones de envoltura adicionales, por lo que también puede acostumbrarse a eso ahora.Mientras no se vuelvas loco con ellos, esto no es algo malo.La especificación HTML5 incluso habla sobre cómo se debe utilizar los DIV para fines de presentación.Así que no te sientas demasiado culpable al respecto cuando solo tienes que añadir uno.

Answer 2

One Way es esto:

1. Haz que su ancla sea un elemento de bloque (pantalla: bloque)
2. Dale un ancho (es decir, 80px) y margen automático
3. y finalmente le dan un ancho al contenedor (es decir, 100%)

   Aquí está el CSS

        div {
           display: flex;
           flex-direction: column;
           padding: 1em;
           border: 1px solid #DDD;
           border-radius: 10px;
           width:100%;
       }
   
       div h2 {
           font-size: 1.2307em;
           text-align: center;
       }
   
       div p {
           flex: 1;
           margin: 0.7692em 0;
       }
   
       div a{
           width:80px;
           margin:auto;
           display: block;
       }
   

   y el html

        <div>
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#">Read more</a>
       </div>
   

Answer 3

Tener un ancla que flota como ese fuera de un párrafo no es un buen marcado.Debe poner una etiqueta de segundo párrafo alrededor del ancla, y luego centre ese párrafo.

También puede usar este CSS en su código como lo tiene ahora:

a {
text-align: center;
display: block;
}

Answer 4

Descubrí que la propiedad Flex "Alojamiento-alineada" ayuda a alinear un elemento en el eje cruzado.Pero solo se puede aplicar a elementos flexibles y elementos de nivel en línea, como , , etc., no se consideran elementos flexibles.Por lo tanto, la única solución que pueda pensar es envolverla con un elemento de nivel de bloque como

o

y usando la propiedad "texto alineado".

<div><a href="#">Read more</a></div>

div a { text-align: center; }

http://www.w3.org/tr/css3-flexbox/ # alineno-yo