在HTML元素的绝对中心的位置文本

嗨我试图做一个非常简单的X删除按钮，我可以在整个这个网站使用我正在建设但是，我似乎无法得到它正确定位...在HTML元素的绝对中心的位置文本

这是它迄今：

<button id="clear-input-location" name="clear-input-location">×</button> 


#clear-input-location { 
    display:block; 
    background: #CCC; 
    color: #FFF; 
    border: none; 
    font-weight: bold; 
    font-size: 20px; 
    border-radius: 20px; 
    line-height: 0; 
    height: 26px; 
}

在这里看到小提琴：http://jsfiddle.net/kpheR/

来源

2013-06-20 André Figueira

问题是什么？在Chrome 27中看起来不错！ –

不够完美，它比顶部更接近底部 –

@AndréFigueira如果你想**完全**作为设计的结果，你应该使用图像。 – 2013-06-20 13:17:23

添加margin: 0 auto;风格到你的文字，这将水平居中。

来源

2013-06-20 13:09:20 Praveen

不能解决问题......没有水平对齐问题，但是是一个垂直的。 –

试试这个

<div class="a"> 
    <button id="clear-input-location" name="clear-input-location">×</button> 
</div> 

.a{ 
    text-align:center; 
}

Demo

来源

2013-06-20 13:12:10 Amit

不解决问题......没有水平对齐问题，而是垂直对齐问题。 –

我已经在一个跨度包裹×然后内造型的跨度为X正确定位解决了这个问题。不管怎么说，还是要谢谢你。

如果任何人需要这样的：

http://fiddle.jshell.net/kpheR/3/

来源

2013-06-20 13:21:21

对我来说，这太偏向于顶部和右侧。 – ajp15243

在Chrome浏览器上看起来很好，我现在仍然在使用其他浏览器样式，因此它可以在任何地方使用...... –

好吧，如果您对此感到满意......请注意字体在操作系统之间甚至有所不同，而不仅仅是在浏览器之间。 – ajp15243

尝试

.center-text { 

text-align: center; 
vertical-align: middle; 

}

来源

2013-06-20 13:22:30

另请参阅http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div –

在HTML元素的绝对中心的位置文本

回答

相关问题