Отображение элементов ниже друг друга в блочном элементе - PullRequest
0 голосов
/ 02 августа 2020

Доброго времени суток, ребята, кто-нибудь знает, как разместить веб-разработку под значком fontawesome, который я пробовал display: block; но это не работает, также я попытался поставить другой элемент, также он не работает, я попытался добавить также элемент
, ничего не работает, вот код, здесь также новый начинающий

.section-service {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-auto-rows: minmax(20rem, auto);;
    grid-gap: 1rem;
    margin: 0 auto;
    margin-top: 4rem;
}

.section-service .color-service {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: crimson;
}
.section-service p {
    display: block;
}
.section-service i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background-color: #fff;
}
 <section class="service section">
                <div class="container">
                    <h2 class="section-title">Service</h2>
                </div>
                <div class="section-service">
                    <div class="web-dev color-service"><div><i class="fa fa-code"></i></div><p>Web Development</p></div>
                    <div class="web-design color-service"><p>Web Design</p></div>
                    <div class="wordpress color-service"><p>WordPress</p></div>
                    <div class="seo color-service"><p>SEO</p></div>
                    <div class="responsive color-service">Responsive Design</div>
                    <div class="learn color-service">Learn More</div>
                </div>
           </section>

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Контейнер (.color-service) из них flex. Вам необходимо установить flex-direction из .color-service на column.

.section-service .color-service {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: crimson;
    flex-direction: column;
}
0 голосов
/ 02 августа 2020

Использовать flex-direction: column; свойство в .color-service

Посмотрите прикрепленный скриншот

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...