居中一个图像和文字在一个按钮，水平和垂直内

我想在纯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

注意如何图标应进一步向右，文本应该是一个远一点的权利也是如此。我目前的理解是，现在它已经死了，因为使用图标的绝对对齐将它从流中移除。

（有些奇怪的变量，由于我产生通过再培训局的HTML。）

来源

2012-12-21 ludwigschubert

后你有什么至今。 – Todd

我真的在寻找一些关于如何做到这一点的最佳方式的指导，但是发布了照顾适当垂直对齐的代码。感谢您的提醒！ – ludwigschubert

你可以只使用一个button一些文本的图像在里面。垂直对齐按钮的内容并添加填充。

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

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

DEMO

来源

2012-12-21 02:49:29 Musa

对不起，这不正确地垂直对齐按钮中的文本。看看你的演示，它似乎太高。 – ludwigschubert

@ludwigschubert它居中见http://s8.postimage.org/g4a3rkmyt/button.png – Musa

哇，这很有趣。对于我在Chrome中你的代码看起来像这样：http://s10.postimage.org/pmvuy0emh/not_centered.png – ludwigschubert

你搜索这个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-21 02:51:23 Reinstar

我看了一下HTML，试了一下，却没有看到这是如何适用于居中的。所有的填充都是硬编码的。图标和文字都不对齐。但是，谢谢你的努力！ – ludwigschubert

编辑我的Javascript后请看看。我不明白你说的是“硬编码”，也许你可以更多地解释我。 – Reinstar

居中一个图像和文字在一个按钮，水平和垂直内

回答

相关问题