it-swarm.com.ru

CSS: сдвиг текста на несколько пикселей вниз, но фон остается неизменным?

У меня есть несколько CSS-кнопок, которые больше при наведении курсора. Я также увеличил размер текста, однако я хотел бы переместить текст на несколько пикселей вниз, не мешая используемому фоновому изображению.

помогите?

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

<div id="nav">
    <a href="index.php">Home</a>
    <a id="headrush">Beer Bongs</a>
    <a id="thabto">Novelty</a>
</div>

#nav a {
    background: url(Images/Button.png);
    height: 28px;
    width: 130px;
    font-family: "Book Antiqua";
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    color: #C60;
    text-decoration: none;
    background-position: center;
    margin: auto;
    display: block;
    position: relative;
}

#nav a:hover {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 16px;
    text-align: center;
    color: #C60;
    text-decoration: none;
    margin: -3px;
    z-index: 2;
}

#nav a:active {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 14px;
    text-align: center;
    color: #862902;
    text-decoration: none;
    margin: 0 -3px;
    z-index: 2;
}
10
Aaron

Используйте свойство line-height CSS.

15
Quantastical

Используйте следующий стиль для ссылки:

#nav a:link {
background: #ff00ff url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:12px;
text-align:center;
vertical-align:bottom;
color:#C60;
text-decoration:none;
background-position:center;
display:block;
position:relative;
}

В :hover и :visited определите только то, что вы хотите изменить (background, font-size и т.д.).

#nav a:hover {
    background: #f000f0 url(Images/Button%20Hover.png);
}

В вашем коде ссылки имеют разный размер:
a - height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited - height:34px; width:140px;),

Вот почему вы получаете другой размер, позицию (в a вы используете margin:auto - 0px), но для a:hover поле изменилось, поэтому ваша ссылка также меняет позицию.

2
miszczu

Если вы хотите переместить текст вниз, используйте padding-top.

2
Brian Warshaw

высота строки может работать в зависимости от вашей ситуации.

Проблема с высотой строки может быть, если у вас есть цвет фона, а затем он также будет расширяться.

Для чего-то, что я делал, я вкладывал некоторые divs

Я использовал position:relative; top:20px;

<div class="col-lg-11">
   <div style="position:relative; top:20px;">CR</div>     
</div>

Этот встроенный стиль является ТОЛЬКО ВРЕМЕННЫМ

0
Tom Stickel