如何中心锚标记

内的文本我想我的锚标记看起来像一个按钮，并创造了这个风格JsFiddle 如何中心锚标记

.details-button { 
    background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #FAB149; 
    -ms-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 1px 2px #999999; 
    -ms-box-shadow: 0 1px 2px #999999; 
    box-shadow: 0 1px 2px #999999; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    -ms-text-shadow: 0 -1px #099FDF; 
    text-shadow: 0 -1px #099FDF; 
    margin: 4px; 
    height: 28px; 
    width: 85px; 
    vertical-align: central; 
    align-items: center; 
    text-decoration: none; 
    font: menu; 
    display: inline-block; 
    /*padding: 6px 0 5px 18px;*/ 
}

它看起来像我想要的，但如何在水平和垂直居中锚标签内的文本？

来源

2014-01-29 Arsen Mkrtchyan

垂直居中可以使用行高来完成。并使用文本对齐方式进行横向排列。 –

仅供参考：“align-items”对大多数网页浏览器来说都不是真实的东西。此外，它仅适用于显示器的容器：flex或display：inline-flex，然后仅用于阻止所述容器内的元素，而不是文本本身。 – mellowfish

添加

text-align: center; 
line-height: 28px;

工作演示：http://jsfiddle.net/3SE8L/2/

来源

2014-01-29 22:34:52 MarcinJuraszek

看起来不错，我可以问问什么是线路高度，你在哪里取28号？ :) –

它设置多高的简单文本行应该是。我将它设置为28，因为这是您设置为元素“高度”的值。它使您的行填充整个空间并自动使内容垂直居中。 – MarcinJuraszek

@ArsenMkrt line-height是元素中每行文本的高度，包括行首和行首的高度。对于单行文本，如果将其设置为容器高度，则会将文本居中。 – mellowfish

只需text-align: center;在您现有的类。

来源

2014-01-29 22:34:17 mellowfish

不错，但它只设置水平 –

啊，我错过了“和垂直”在你的问题。自动执行这个过程非常麻烦。 – mellowfish

要水平，并在中间垂直对齐的中心你的文字，试试这个：

CSS：Example Fiddle

.details-button{ 
    //your existing styles 
    //height: 28px; <-- remove this entry 

    text-align: center; 
    padding: 6px 0; 
}

来源

2014-01-29 22:37:30 badAdviceGuy

填充制作按钮更大 –

@ArsenMkrt，也许但你可以编辑填充到你想要的2px 3px等等，或者使用像'.75em'这样的EMs等等。 – badAdviceGuy

好吧，但是，但是我希望我的按钮具有28像素的高度......或者需要通过填充删除高度和控制高度......感谢但另一种方式如何做到这一点 –

首先，删除这个样式声明;它是无效的标记：

vertical-align: central;

接下来，添加这个水平居中文本：

text-align: center;

最后，让你的身高汽车和代替的line-height声明，设置填充的味道：

height:auto; 
padding:3px 0;

这应该做到这一点！一定要删除无效的声明，因为它可能会导致您的CSS在某些浏览器中中断。

如果有帮助，请投票给我！谢谢。 :)

来源

2014-01-29 22:53:34

是的，这有助于！谢谢：） –

如何中心锚标记

回答

相关问题