Как переместить элемент вниз по litte-биту в html

Это звучит странно, я знаю, но мне нелегко получить кусок текста, чтобы двигаться вниз по крошечному биту, чтобы он сосредоточился на вкладке.

вот как это выглядит:

Я хочу, чтобы покупка была центрирована по вертикали.

Вот html:

<div class="row-2">
     <ul>
         <li><a href="index.html" class="active">Buy</a></li>
     </ul>
</div>

Ответ 1

Вы можете установить высоту строки в тексте, например, в активном классе:

.active {
    ...
    line-height: 2em;
    ....
}

Ответ 2

<div class="row-2">
 <ul>
     <li><a href="index.html" class="active"><p style="margin-top: 10px;">Buy</p></a></li>
 </ul>

Играйте с ним

Ответ 3

Простым способом является установка line-height в высоту элемента.

Ответ 4

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

Ответ 5

Вы можете использовать vertical-align для вертикального перемещения предметов.

Пример:

<div>This is an <span style="vertical-align: -20px;">example</span></div>

Это сместит диапазон, содержащий слово "пример", вниз на 20 пикселей.

Предполагаемое использование этого свойства - выравнивание элементов разной высоты (например, изображений с разными размерами) вдоль заданной линии. vertical-align: top, например, выровняет все изображения на одной линии, а верхняя часть каждого изображения выровняется друг с другом. vertical-align: middle выровняет все изображения так, чтобы середина изображений выровнялась друг с другом, независимо от высоты каждого изображения.

Вы можете увидеть наглядные примеры в этом CodePen Криса Койера.

Надеюсь, это поможет!

Ответ 6

Попробуйте следующее:

.row-2 ul li {
    margin-top: 15px;
}

Ответ 7

<style>
.row-2 UL LI A
{
  margin-top: 10px;  /* or whatever amount you need it to move down */
}
</style>

Ответ 8

Это просто, просто используйте:

<br />