There was a problem with the alignment of the image relative to the button text. I need the picture to recede from the right edge by 5% at all screen resolutions. For this, I nailed it to it with align = "right", but now how to align the image relative to the text (in the middle)? Adequately displayed on the desktop version, but when you change the resolution slides up. Code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π‘ΠΎΠ±ΡΡΠΈΡ</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <style> @media screen and (max-width: 450px) { .pagination{ font-size: 12px; } .page-item1{ display: none; } .btn{ font-size: 12px; } body{ font-size: 12px; } .card-img-top{ height: 200px } } </style> </head> <body> <div class="container-fluid" style="padding: 2% 8%; display: table;"> <h2 class="caption" style="margin-bottom: 0;">Π ΡΠΊΠΎΠ²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠΈ</h2> <div class="row"> <div class="col-md-3" id="success" > <div class="card2"> <div class="card-footer"> <h3>Π€ΠΈΠ»ΡΡΡ:</h3> </div> <div class="card-body"> </div> <p style="padding-top: 5%; vertical-align: middle"> <button class="btn1 btn-link" style="text-decoration:none; outline: none" type="button" data-toggle="collapse" data-target="#collapseYear"> ΠΠΎ ΡΠΈΠΏΡ:</button> <a data-toggle="collapse" data-target="#collapseYear" href="#collapseYear" > <img src="https://vignette.wikia.nocookie.net/bendy-and-the-ink-machine/images/9/9f/%D0%A1%D1%82%D1%80%D0%B5%D0%BB%D0%BA%D0%B0.png/revision/latest?cb=20170925011416&path-prefix=ru" style="width: 8%; margin-right: 5%;" align="right"> </a> </p> <div class="col-xl-12" style="border-bottom: 1px solid rgba(0, 0, 0, .1); padding-bottom: 0px"> <div class="collapse multi-collapse show" id="collapseYear"> <div class="card card-body"> <p class="checkbox"><input class="checkbox" type="checkbox"><label> ΠΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΠΈ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> ΠΠ΅ΠΊΡΠΈΠΈ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> Π‘ΡΠ°ΠΆΠΈΡΠΎΠ²ΠΊΠΈ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> Π’ΡΠ΅Π½ΠΈΠ½Π³ΠΈ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> ΠΡΡΡΠ°Π²ΠΊΠΈ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> ΠΠ½ΠΈ ΠΎΡΠΊΡΡΡΡΡ
Π΄Π²Π΅ΡΠ΅ΠΉ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> Π₯Π°ΠΊΠ°ΡΠΎΠ½Ρ</label></p> <p class="checkbox"><input class="checkbox" type="checkbox"><label> Π€Π΅ΡΡΠΈΠ²Π°Π»ΠΈ</label></p> </div> </div> </div> <div class="text-right" style="padding: 10px"> <button type="button" class="btn btn-primary" onclick="run()">ΠΠ°ΠΉΡΠΈ</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html> :
Here is the result: 1) Desktop 
2) Lower resolution 
