css - 垂直对齐不同大小的文本

Question

我想对齐一个加号（加号）标记和它旁边的文本，但是，由于“+”太小，它被一个标签放大了。这会导致角色变得太大，让我很难对齐它们。我如何将 + 字符和 Text 均匀地对齐？

这是代码：http: //jsfiddle.net/rs75V/

Answer 1

你有没有尝试过

vertical-align:middle;

或者

vertical-align:-10%;

? 这在我看来没问题。

Answer 2

试着玩这个：
http
://www.w3schools.com/cssref/pr_pos_vertical-align.asp我认为这就是你要找的，它有很多不同的方式来向上或向下移动文本对齐。

Answer 3

这很骇人听闻，但这应该可以。

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;


    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    line-height:40px;
    display:inline-block;
    cursor:pointer; 
}
span{
    font-size:40px;
    vertical-align:-15%;
}

Answer 4

试试这个：

span {
    font-size: 40px;
    line-height: 0;
    vertical-align: middle;
}

Answer 5

尝试浮动你的aand span。

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;

    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    cursor:pointer; 
    line-height: 40px;
    float: left;
}
span {
    font-size:40px;
    float: left;
    margin: 0 .1em 0 0;
}

Answer 6

您可以将跨度显示为内联块，然后在其上使用填充...

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;


    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    display:inline-block;
    cursor:pointer; 

}
span{
    font-size:40px;
    line-height: 0;
    display: inline-block;
    padding-bottom: 9px;
}