#html #css #alignment #vertical-alignment #bootstrap-icons
Вопрос:
Моя кнопка поиска на панели навигации имеет значок начальной загрузки и текст, которые не выровнены по вертикали
Ссылка на скрипку: Скрипка
html для поиска:
<form class="d-flex search-form">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-dark" type="submit">
<div class="nav-search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search nav-svg" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Search
</input>
</button>
</form>
css в поиске, который я пробовал:
.nav-search {
display: inline-block;
}
.search-form {
text-align: center;
width: 100%;
}
Комментарии:
1. можете ли вы поделиться скриншотом вывода, который вы хотите?
Ответ №1:
Вы можете использовать display:flex
с align-items
для вертикального выравнивания значков с текстом.
.nav-search {
display: flex;
align-items: center;
}
<form class="d-flex search-form">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-dark" type="submit">
<div class="nav-search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search nav-svg" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
Search
</div>
</button>
</form>
Ответ №2:
Измените значения атрибутов поля просмотра, чтобы определить положение и размер в пользовательском пространстве. Вот документация для того же: Окно просмотра