1

我正在尝试用纯 CSS 构建一个按钮，但在对齐不同的元素时却失败了。这可能很容易，但我无法理解它。这是它的外观：

在此处输入图像描述

该按钮应包含文本和图像。两者都应该垂直居中。他们两个一起应该水平居中。

我可以让其中任何一个单独工作，但不能同时工作。

我真的在寻找一些关于什么是最好的方法的指导，但这是我到目前为止使用的，对我来说尽可能简化：

<span style="display:table; text-align:center;">
<span style="display:table-cell; position:relative; ">
    <a href=… >
        <img style="position:absolute; top:50%; margin-top:-#{ height / 2}px"></img>
    </a>
</span>
    <a href=… > TEXT </a>
</span>

这是目前的结果。

在此处输入图像描述

注意图标应该更靠右，文本也应该更靠右一点。我目前的理解是，现在它是死点，因为对图标使用绝对对齐会将其从流程中移除。

（由于我通过 ERB 生成 HTML，一些奇怪的变量。）

4

2 回答 2

3

您可以只在其中使用button带有一些文本的图像。垂直对齐按钮的内容并添加填充。

<button><span><img src="http://placehold.it/25x25">Some Text</span></button>​

button{
    padding: 1em 2em;
}
img, span{
    vertical-align:middle;
}

演示

于 2012-12-21T02:49:29.677 回答
0

您是否搜索过此 HTML：

<html>
<head>
<style>
    .icon_button{
        background:#FFFFFF url(http://www.limitedlink.com/images/png/ico.png) no-repeat 4px 4px;
        padding:4px 4px 4px 22px;
        height:auto;
    }
</style>

</head>
<body>
    <input type="button" value="halo" class="icon_button" />
</body>
</html>
于 2012-12-21T02:51:23.030 回答