Html 文本垂直居中，带有字形图标

我正试图用一个字形图标垂直居中文本。。。我似乎不知道该怎么做。我知道它将与内联样式或CSS，但我似乎无法得到正确的语法

代码：

CSS:

您需要使用，因为它将锚元素文本与p元素字体的底部对齐

.panel body i+a{/*选择字体图标后的链接*/ 垂直对齐：文本底部； }

请试试这个：

.panel-body 
{
    float:right;
    margin-top:-50px;
}

---

你也能发布你的CSS吗？你能发布你的CSS代码吗：在我这端，我的意思是垂直对齐+是相邻的选择器。因此，它只会选择紧跟在图标前面的锚点。这对运行这里的代码段有效吗？是的，我会发布我的css的其余部分。我猜它正在被覆盖。。。。一开始我并没有发布所有的bc，我不认为这是必要的。我只是发布了我所有的CST，这是因为a的字体比p大。使用垂直对齐：超级

   <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
    @import url(http://fonts.googleapis.com/css?family=Oswald:400,300);

    a,
    a:hover,
    a:focus,
    a:active,
    a.active {
        outline: 0;
    }

    ul, ol {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        color: #FF432E;
        text-decoration: none;
    }

        a:hover {
            text-decoration: none;
        }

    p {
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
        line-height: 21px;
    }

    /**** Start Section Title Section ****/

    .section-title h3 {
        color: #666 !important;
        font-size: 28px;
        font-family: 'Oswald', sans-serif;
        text-transform: none;
    }

    .section-title p {
        padding-bottom: 60px;
        color: #999;
        font-size: 18px;
        //font-style: italic;
        font-weight: 300;
    }

    /**** Start Background Color ****/

    .blue {
        background: #28ABE3;
    }

    .green {
        background: #72bf48;
    }

    .red {
        background: #FF432E;
    }

    .light-red {
        background: #FB6648;
    }

    .light-orange {
        background: #FA6900;
    }

    .color {
        background: #0ECEAB;
    }

    .purple {
        background: #9b59b6;
    }


    /**** Start Main Body Section ****/

    .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .menu-item {
        color: #fff;
        /*padding-top: 45px;
        padding-bottom: 45px;
        margin-bottom: 30px;*/
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        border: 5px solid transparent;
    }

        .menu-item:hover {
            border: 5px solid rgba(255, 255, 255, 0.70);
        }

        .menu-item a {
            color: #fff;
            font-size: 15px;
            /*display: block;*/
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
/**/
            .menu-item a p {
                font-family: 'Oswald', sans-serif;
                font-weight: 300;
                font-size: 20px;
            }

            .menu-item a i {
                font-size: 50px;
                padding-bottom: 20px;
            }

        .menu-item:hover a {
            text-decoration: none;
        }

    @media only screen and (min-width : 600px) and (max-width : 991px) {

        .menu-item {
            display: inline-block;
            width: 32.8%;
        }

            .menu-item.responsive {
                width: 49.5%;
                float: left;
                margin-right: 3px;
                margin-top: 5px;
            }

            .menu-item.responsive-2 {
                width: 49.5%;
                float: right;
                margin-top: 5px;
            }
    }



    @media only screen and (min-width : 992px) and (max-width : 1199px) {

        .menu-item {
            padding-top: 15px;
            padding-bottom: 15px;
        }

            .menu-item a i {
                font-size: 32px;
            }

            .menu-item a p {
                font-size: 16px;
            }
    }

    /*Glyphicon styling*/
    .glyphicon-credit-card:before {
        margin-right: 20px;
        font-size: 30px;
    }

    .panel-body i + a { 
        vertical-align: text-bottom;
    }
</style>

.panel-body 
{
    float:right;
    margin-top:-50px;
}