How do you level vertically down the center of the fontasomewe?



  • vertical-align: center is not helping. We need the icon to be at the center of the adaptive block. How? display: flex is too much for me. Any options?



  • example

    div{
        padding-left: 30px;
        position: relative;    
        border: 1px solid #ccc;
    }
    div:before{
        content: 'i';
        position: absolute; top: 50%; left: 0;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #f00;
        color: #fff;    
    }
    <div>
    <p>vertical-align: center не помогает. Нужно чтобы иконка была в центре адаптивного блока. Как быть? display: flex это перебор, как по мне. Есть варианты?</p>
    </div>

    Option with display:flex

    div{
        padding: 10px;
        position: relative;    
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
    }
    div .fa{
        margin-right: 10px;
        font-size: 20px;
        color: green;
    }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div>
    <i class="fa fa-smile-o" aria-hidden="true"></i>
    <p>vertical-align: center не помогает. Нужно чтобы иконка была в центре адаптивного блока. Как быть? display: flex это перебор, как по мне. Есть варианты?</p>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2