Question

我正在尝试为自己创建一个<kbd>标记。我正在尝试使用下面的this image，

CSS：

kbd {
    font-family: Courier;
    padding-top:8px;
    padding-bottom:8px;
    padding-right:15px;
    padding-left:10px;
    background: url('kbd.png');
    background-repeat:no-repeat;
}

HTML：

<p>Open Terminal  <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>

但是除非文字足够大以覆盖图像，否则图像不会完全显示。看下面的屏幕截图。

screenshot

此外，我无法将文本置于中心位置，我尝试align但无法成功。任何有关<kbd>标记的更好方法的帮助都将不胜感激。

Answer 1

如果你有填充，而不是使用不同的左右填充，以及使用min-width和text-align: center;，你可以很好地显示它。

http://jsfiddle.net/TLV4a/

kbd {

    display: inline-block;
    min-width: 50px;
    text-align: center;

    font-family: Courier;
    padding: 6px 5px 8px;
    background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}

Answer 2

值得注意的是，这完全可以在不需要图像的情况下完成。没有它会更灵活;如果文本是图像，那么长的<kbd>文本会中断，但如果它完全在CSS中完成则不会。

所以我建议：

http://jsfiddle.net/TLV4a/1/

kbd {

    display: inline-block;
    min-width: 45px;
    text-align: center;

    font-family: Courier;
    margin: 0 5px;
    padding: 0 5px;
    background-color: #f7f7f7;
    border-width: 1px 1px 3px;
    border-style: solid;
    border-color: #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 4px 1px #fff;
    box-shadow: inset 0 0 4px 1px #fff;
    line-height: 1.75;
}

Answer 3

查看this jsFiddle

kbd {
    font-family: Courier;
    padding-top:6px;
    padding-bottom:6px;
    background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
    display: inline-block;
    width: 54px;
    text-align: center;
    background-repeat:no-repeat;
}

Answer 4

You can use this code to get your desire resutl:
kbd {
    background: url("kbd.png") no-repeat;
    display: inline-block;
    font-family: Courier;
    min-height: 31px;
    min-width: 54px;
    font-size: 0.75em;
    padding: 6px 0 0;
    text-align: center;
}
/*use font size to adjust with the key image and use padding  0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/

Answer 5

添加背景大小可能是您的最佳解决方案。

    background-size:100% 100%;

Answer 6

您可以使用text-align:center来对齐文字，也可以使用z-index属性的背景图片。

在这里查看z-index示例：

http://www.w3schools.com/cssref/pr_pos_z-index.asp

如何将文本保持在中心以完全在背景上显示图像

6 个答案: