Question

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

enter image description here

该按钮应包含文字和图像。两者都应垂直居中。它们两个在一起应该是水平居中的。

我可以让它自己工作，但不能同时工作。

我真的在寻找关于最佳方式的一些指导，但是到目前为止，这是我正在使用的内容，尽可能简化：

<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>

这是目前的结果。

enter image description here

请注意图标应该如何向右移动，文本也应该向右一点。我目前的理解是，现在它已经死了，因为对图标使用绝对对齐会将其从流程中删除。

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

Answer 1

您可以使用button，其中包含一些文字和图片。垂直对齐按钮的内容并添加填充。

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

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

DEMO

Answer 2

您是否搜索过此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>

将图像和文本集中在一个按钮内，水平和垂直

2 个答案: