如何在垂直中心对齐图标字体?

时间:2014-10-24 01:53:07

标签: css html5 icon-fonts

我无法在垂直中心对齐icomoon。有谁可以帮助我?

HTML:

<div class="container "> 
        <div class="dashboard bg-gradient-BLUE6"> 
            <div class="top">                   
                <img src="AlstromLogo.png"/> 
                <div id="titleTop">                     
                    <span data-icon="&#xe67a;" class="icon-dashboard" id="title"></span> <span>&nbsp;Dashboard</span>
                </div>
            </div>
            <div class="middle">
            </div>
            <div class="bottom">
            </div>    
        </div>                 
    </div>

CSS:

body{
    /* Common Screen width and Height styles*/
    width:100%;
    height:100%;        
    /*Background gradient*/
    background: linear-gradient(#61a9f4, #3c82e1) no-repeat;
}
.container{
    /*Centering the webpage contents to the center of the screen*/
    margin: 0 10% 0 10%;  /*top, right, bottom, left*/
    padding: 0 0 0 0;   
    height:100%;
}

@media all {


/* Styles */
    figure, img{
        display:inline-block;
        margin-right: 1%;
        border-right-style: solid;
        border-right-color: #036;
        border-right-width: 1px;
    }
    .dashboard{
        border-style:solid;
        border-color:#4B84C9;
        border-width: 1px;
        background: linear-gradient(#6699CC #336699); no-repeat;
        border-radius: 4px;
        /*height: 100%;*/
        height: 100%;
        width:100%;     
    }   
    .top{
        height: 6.33245382%;
        width:100%;
        border-bottom-style: solid;
        border-bottom-color: #036;
        border-bottom-width: 1px;
    }
    .middle{
    }
    .bottom{
    }
    span#title{     
        line-height: 100%;

        vertical-align:top; 
        text-align:center;  
        font-size:1.2em;
    }
    #titleTop{
        width: 50.7553816%;
        display: inline-block;
        line-height: 100%;      
        height: 100%;
        margin: auto;
    }
}

我无法发布图片。请设想输出

| | |图片|

| | [图标文字来到这里,必须在线以上]

1 个答案:

答案 0 :(得分:0)

只需添加vertical-align:center;到img