CSS:将文本向下移动几个像素但保持背景不变?

Posted

技术标签:

【中文标题】CSS:将文本向下移动几个像素但保持背景不变?【英文标题】:CSS: Moving the text down a few pixels but keeping the background still? 【发布时间】:2012-06-14 11:56:19 【问题描述】:

我有一些 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;

【问题讨论】:

OT:请在链接中添加role="button",以便浏览器认为它们是按钮 【参考方案1】:

Vertical align does the trick

.text-to-align 
    vertical-align: bottom;

【讨论】:

【参考方案2】:

line-height 可以根据您的情况工作。

如果你有背景颜色,那么行高可能会出现问题,然后它也会扩大。

对于我正在做的事情,我正在嵌套一些 divs

我用position:relative; top:20px;

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

这种内联样式只是临时的

【讨论】:

【参考方案3】:

使用以下样式的链接:

#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 中仅定义您想要更改的内容(backgroundfont-size 等)。

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

在您的代码中,链接大小不同:a - height:28px; width:130px;,a:hover height:34px; width:140px;,a:visited - height:34px; width:140px;),

这就是为什么你得到不同的大小、位置(在a 你使用margin:auto - 0px),但是对于a:hover 边距已经改变,所以你的链接也改变了位置。

【讨论】:

【参考方案4】:

使用line-height CSS 属性。

【讨论】:

【参考方案5】:

如果你想将文本下移,使用 padding-top。

【讨论】:

以上是关于CSS:将文本向下移动几个像素但保持背景不变?的主要内容,如果未能解决你的问题,请参考以下文章

移动视图中的 CSS 图像保持率

如何使用 CSS 将视频向右移动 - 以提高响应能力?

如何在悬停时使按钮内的文本透明?背景应该保持不变

背景:固定没有重复不能在移动设备上工作

我们如何在电子表格公式中更改列值并保持行不变?

CSS/HTML 使文本相对于图像大小保持不变?