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

Question

Рустем

html , css

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

Как можно улучшить структуру CSS для стилизации кнопки с иконкой "Меню" на фоне синего цвета и белым текстом? Вот код кнопки: <br/> HTML: <br/> <pre><code class="html">&lt;button&gt;
                    &lt;i class="fi fi-br-menu-burger"&gt;&lt;/i&gt;
                    Меню
                &lt;/button&gt;</code></pre> <br/> <br/> CSS: <br/> <pre><code class="css">.menu button {
 padding: 7px 13px;
 background-color: #5582ff;
 color: white;
 border: none;
 border-radius: 7px;
 height: 30px;
}</code></pre> <br/> <br/> Показан результат стилизации кнопки.

28 мая 2024 г. 4:21

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы иконка была по центру вертикально внутри кнопки, можно использовать свойство `display: flex;` и `align-items: center;` в CSS. 

Пример CSS для центрирования иконки в кнопке:

```css
.menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    background-color: #5582ff;
    color: white;
    border: none;
    border-radius: 7px;
    height: 30px;
}
```

Таким образом, иконка и текст будут расположены по центру вертикально внутри кнопки.

Чтобы улучшить структуру CSS для стилизации кнопки с иконкой "Меню" на фоне синего цвета и белым текстом, можно добавить стили для иконки в селекторе `.menu button i`:

```css
.menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    background-color: #5582ff;
    color: white;
    border: none;
    border-radius: 7px;
    height: 30px;
}

.menu button i {
    margin-right: 5px; /* добавим небольшое расстояние между иконкой и текстом */
}
```

Теперь иконка будет иметь небольшое расстояние справа от текста "Меню" и кнопка будет выглядеть более структурированной и эстетичной.

Answer 2

.menu button {
    /*...*/
    display: inline flex;
    align-items: center;
}