I impose a button with an icon. As usual, the icon is on the left, followed by the text. The text with the icon is aligned to the center of the button (horizontally and vertically.). The width of the button depends on the width of the parent element, and the text of the button can be transferred to two lines, but the text and icon should continue to be aligned in the center of the button.

  • one
    Code attach. - Artem Gorlachev

2 answers 2

Option 1:

/* Π’Ρ€Π°ΠΏ для ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ тСкста */ .item { position: relative; padding-left: 1.5rem; } /* Иконка */ i { position: absolute; left: 0; top: 50%; margin-top: -.5rem; } /* Π”ΠΎΠΏ. стилизация для наглядности ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° */ /* Π’Ρ€Π°ΠΏ для ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ тСкста */ .item { max-width: 150px; width: 100%; margin-bottom: 1rem; } /* Иконка */ i { display: block; width: 1rem; height: 1rem; background: #ccc; } /* ВСкст */ span { display: inline-block; vertical-align: middle; } 
  <div class="item"> <i></i> <span>Lorem ipsum dolor.</span> </div> <div class="item"> <i></i> <span>Lorem ipsum dolor sit amet.</span> </div>

Option 2 flex:

 .item { display: flex; flex-flow: row nowrap; align-items: center; } /* Π”ΠΎΠΏ. стилизация для наглядности ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° */ .item { max-width: 150px; width: 100%; margin-bottom: 1rem; } i { display: block; width: 1rem; height: 1rem; background: #ccc; margin-right: .5rem; } span { width: 90%; } 
 <div class="item"> <i></i> <span>Lorem ipsum dolor.</span> </div> <div class="item"> <i></i> <span>Lorem ipsum dolor sit amet.</span> </div>

Option 3 table:

 .item { display: table; } .icon { display: table-cell; vertical-align: middle; } /* Π”ΠΎΠΏ. стилизация для наглядности ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° */ .item { max-width: 150px; width: 100%; margin-bottom: 1rem; } .icon { width: 1rem; padding-right: .5rem; } .icon i { display: block; width: 1rem; height: 1rem; background: #ccc; } 
 <div class="item"> <span class="icon"><i></i></span> <span>Lorem ipsum dolor.</span> </div> <div class="item"> <span class="icon"><i></i></span> <span>Lorem ipsum dolor sit amet.</span> </div>

  • one
    Plus me Lenochka - user33274

Hope this is what you were looking for. Here is a working example:

 .parent { width: 130px; } button { width: 100%; position: relative; padding-left: 25px; box-sizing: border-box; word-wrap: break-word; } .icon { width: 20px; height: 20px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } 
 <div class="parent"> <button> <span class="icon">&#x2709;</span> Send e-mail to Mr.Smith </button> </div>