Модуль макета Flexbox CSS3 — выравнивание элемента встроенного уровня, если он является гибким элементом.

Question

Учитывая, что у меня есть этот 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>

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

Как я могу стилизовать якорь так, чтобы он располагался по центру по горизонтали?

Answer 1

Набор align-self: center на <a> (разумеется, с версиями свойства, специфичными для браузера).Встроенные элементы действительно становятся гибкими элементами, поэтому нет необходимости в обертке на уровне блока. <a>.

При этом, если вы собираетесь использовать flexbox, вы быстро обнаружите, что для него часто требуются дополнительные элементы-обертки, так что вы можете к этому привыкнуть уже сейчас.Пока вы не сходите с ними с ума, в этом нет ничего плохого.В спецификации HTML5 даже говорится о том, насколько уместно использование элементов div в презентационных целях.Так что не чувствуйте себя слишком виноватыми, когда вам просто нужно добавить один.

Answer 2

Один путь Это:

1. Сделайте свой якорь блочный элемент (дисплей: блок)
2. Дайте ему ширину (т.е. 80px) и маржина авто
3. и finaly дают ей ширину контейнеру (т.е. 100%)

   Вот 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;
       }
   

   .

   и 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

Наличие якоре, такая, как за пределами абзаца не хорошая разметка.Вы должны поставить второй тег параграфа вокруг якоря, а затем центр этого абзаца.

Вы также можете просто использовать этот CSS в вашем коде, так как у вас есть сейчас:

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

.

Answer 4

Я обнаружил, что «Align-Self Flex Flex помогает выровнять элемент в поперечном оси.Но это может быть применено только к элементам гибких элементов и элементов встроенных уровней, таких как , и т. Д., Не рассматриваются как предметы flex.Таким образом, единственное решение, которое я могу подумать о том, является обертывание его элементом уровня блока, такими как

или

и используя свойство "Text-align".

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

div a { text-align: center; }

.

http://www.w3.org/tr/css3-flexboxboxbox/ # align-self