Вертикальный текст центра с глификоном

Я пытаюсь ВЕРТИКАЛЬНО текст центра с глификоном ... Кажется, я не понимаю, как это сделать. Я знаю, что это будет либо с встроенным стилем, либо с 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>

источник

2015-09-23 Code

Вы можете разместить свой CSS, а? –

Можете ли вы разместить свой код CSS: –

Просто отправлено css – Code

Вы должны использовать vertical-align: text-bottom как она выравнивает якорный элемент текста с нижней части шрифта 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>

источник

2015-09-23 15:03:06

что такое i + a? – Code

'+' - это смежный селектор. Поэтому он будет выбирать якорь, только если ему сразу предшествует значок. –

Это не сработало для меня .... – Code

пожалуйста, попробуйте это:

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

DEMO

источник

2015-09-23 15:04:03

Вертикальный текст центра с глификоном

ответ

Смежные вопросы