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
中仅定义您想要更改的内容(background
、font-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:将文本向下移动几个像素但保持背景不变?的主要内容,如果未能解决你的问题,请参考以下文章