Hello ! Tell me how to make a link with the image, so that the image is the background and to the left, and the text on the right is aligned with the height. As in this image. Thank you in advance.

    2 answers 2

    A working example on jsFiddle .

    html

    <a class="custom" href="#">Super Link!</a>

    css

     .custom::before { background: url('http://placehold.it/30x30'); content: ""; float: left; height: 30px; margin-right: 5px; width: 30px; } .custom { line-height: 30px; /* Как высота картинки */ }

    It can be easier if you do not need to do a background image ( jsFiddle ):

    css

     .custom::before { content: url('http://placehold.it/30x30'); float: left; margin-right: 5px; } .custom { line-height: 30px; /* Как высота картинки */ }

      There is a solution in which the area between the picture and the text will also be clickable ( jsFiddle )

      .custom { display: inline-block; background: url('http://placehold.it/30x30') no-repeat; line-height: 30px; padding-left: 35px; }