@Denioo

Как выровнять text и конку внутри блока?

Здравствуйте, немогу додуматься как выровнять по центру иконку и текст после нее, пока получается так:
5db5761e72d46730756510.png

а надо так:
5db5760263778058120350.png

Код:
<div class="dropdown__info__checkbox">
                    <input type="checkbox" class="hide__info" id="info_1">                    
                    <label for="info_1"><i class="material-icons">trending_up</i>Statistics</label>
                    <div class="information"><div><img src="./img/pt.png" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in</p></div></div>
                </div>


Sass
.dropdown__info
            margin: 0 400px 0 400px
            .dropdown__info__checkbox
                text-align: start
                width: 100%
                height: 100% 
                margin-top: 20px                                      
                .material-icons
                    display: flex
                    vertical-align: middle
                    padding-right: 20px
            .hide__info
                display: none
                width: 100%
            .information
                display: none
                padding: 15px
            .information div
                display: flex     
            .hide__info:checked + label + .information
                display: block 
                background: #ffffff
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13)
                border-radius: 5px                             
            .hide__info + label                
                display: flex
                justify-content: flex-start
                border: 1px solid #ffffff
                width: 100%
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13)
                height: 50px
                border-radius: 5px
            &__checkbox label
                cursor: pointer


https://jsfiddle.net/5zpkv2ry/1/
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
@ildar-meyker
Подготовьте свой пример на https://jsfiddle.net/.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы