How to align text to the center?

Question

css

Hey! There is a button with an icon and text:

<button id = "search_button" title = "приступить к поиску"><img src="img/search.png">найти</button>

The default text is located at the bottom next to the icon. How to position this text in the middle?

Answer 1

I would do like this:

button#search_button {
            background: url('img/search.png') no-repeat center left;
            height: 36px;
            width: 90px;
            text-align: end;
}

For example here .

Answer 2

button img, button span { display: inline-block; }
<button id = "search_button" title = "приступить к поиску"><img src="img/search.png"><span>найти</span></button>

And the alignment is vertical-align: middle; should be enough. Or play with line height.

Answer 3

wrap it up to start