Question

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

Answer 1

你试过吗

vertical-align:middle;

或

vertical-align:-10%;

？ This看起来对我很好。

Answer 2

试着玩弄这个：
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp 我认为这是你正在寻找的东西，它有很多不同的方法来上下移动文本对齐。

Answer 3

这是hackish，但这应该有用。

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

尝试浮动您的a和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;
}

在<a></a>中垂直对齐不同大小的文字

6 个答案: