Добавить изображение / значок на границе Angular 6 Card Botton-Center

Question

В настоящее время я разрабатываю панель поиска с использованием Angular 6, и мне бы хотелось, чтобы на нижней центральной границе карты было изображение или значок стрелки, который будет использоваться для переключения отображения / скрытия панели поиска. Требуемый результат показан ниже Может кто-нибудь предложить мне, что можно сделать для достижения результата.

<div *ngIf="isSearchVisible" class="search-panel-lower">
  <div class="card">
    <div class="card-body">
      <form>
         <!--Code here-->
      </form>
    </div>
  </div>
</div>

Answer 1

Вы можете поместить кнопку с помощью CSS следующим образом.

    <div class="card" style="position:relative;overflow:initial;">
        <div class="card-title">
            title
        </div>
        <div class="card-content">
            content
        </div>
        <!-- button code -->
        <div style="position:absolute;text-align:center;width:100%;bottom:-10px;">button icon</div>
    </div>