0

Возникла проблема с выравниванием картинки относительно текста кнопки. Мне нужно, чтобы картинка отступала от правого края на 5% на всех разрешениях экрана. Для этого я прибил ее к нему при помощи align="right", но как теперь выровнять картинку относительно текста(посередине)? Адекватно отображается на десктопной версии, но при изменении разрешения съезжает вверх. Код

  <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>

:

Вот так выглядит результат: 1)Desktop введите сюда описание изображения

2)Меньшее разрешение введите сюда описание изображения

2 ответа 2

1

возьмите текст и картинку в div и используйте flexbox > row > align-items:center

0

.checkbox{
  display: flex;
  align-items: center;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.