CSS3 Flexbox, Módulo de desenho - Align inline-elemento de nível quando se trata de um item flex

Question

Dado que eu tenho 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>

E o 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;
}

Como posso estilo de âncora, de modo que ele é centrado horizontalmente?

Answer 1

Conjunto align-self: center no <a> (com navegador versões específicas de propriedade também, é claro).Elementos de linha, de fato, tornar-flex itens, então não há necessidade de um nível de bloco de wrapper em torno de <a>.

Dito isto, se você vai estar usando o flexbox, você vai descobrir rapidamente que muitas vezes requer envolvimento extra divs, então você pode muito bem se acostumar a isso agora.Contanto que você não enlouquecer com eles, isso não é uma coisa ruim.A especificação HTML5 ainda fala sobre como o uso de divs para fins de apresentação é adequada.Por isso não se sinta tão culpado sobre isso, quando você só tem que adicionar um.

Answer 2

um caminho é este:

1. faça a sua âncora de um elemento de bloco (display:block)
2. dê a ele uma largura (ie.80px) e margem auto
3. e, finalmente, dar-lhe uma largura para o recipiente (ie.100%)

aqui é o lugar

     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;
    }

e o 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

Ter uma âncora flutuante, como que fora de um parágrafo não é boa marcação.Você deve colocar uma segunda marca de parágrafo em torno de âncora e, em seguida, centro de parágrafo.

Você também pode simplesmente usar esta CSS do seu código como está agora:

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

Answer 4

Eu descobri que o "alinhar-auto" flex propriedade ajuda a alinhar um elemento transversal do eixo.Mas ela só pode ser aplicada para flex itens de linha e de nível de elementos, como <a>, <span>, etc.não são considerados como flex itens.Assim, a única solução que eu posso pensar é envolvê-lo com um elemento nível de bloco como <div> ou <p> e usar "text-align propriedade".

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

div a { text-align: center; }

http://www.w3.org/TR/css3-flexbox/#align-self