html - 垂直居中带有字形的文本

Question

我正在尝试VERTICALLY 将带有字形的文本居中...我似乎无法弄清楚如何做到这一点。我知道它将使用内联样式或 CSS，但我似乎无法获得正确的语法。

代码:

<div class="col-lg-3">
    <div class="menu-item blue">
        <div class="panel-heading text-center">
            <a href="#feature-modal" data-toggle="modal">
                <i class="fa fa-magic"></i>
                <p>Test</p>
            </a>
        </div>
        <hr />
        <div class="panel-body"> 
            <p><i class="glyphicon glyphicon-credit-card"></i><a href="http://www.google.com">Test Tab</a></p>
        </div>
    </div>
</div>

CSS:

   <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>

Answer 1

您需要使用 vertical-align: text-bottom因为它将 anchor 元素文本与 p 元素字体的底部对齐。

.panel-body i + a { /* Select links after font icons */
  vertical-align: text-bottom;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="col-lg-3">
  <div class="menu-item blue">
    <div class="panel-heading text-center">
      <a href="#feature-modal" data-toggle="modal">
        <i class="fa fa-magic"></i>
        <p>Test</p>
      </a>
    </div>
    <hr />
    <div class="panel-body">
      <p><i class="glyphicon glyphicon-credit-card"></i><a href="http://www.google.com">Test Tab</a>
      </p>
    </div>
  </div>
</div>