Как выровнять заголовок по центру и значок справа на одной строке и реагировать

Как выровнять заголовок по центру строки и значок справа от той же строки (он должен быть отзывчивым).

<h6 class = "card-title ">Activity</h6> 
<a class = "btn btn-info" href = "#">
    <i class = "fa fa-edit"></i>
</a>
<a class = "btn btn-danger" href = "#">
   <i class = "fa fa-trash-o"></i>
</a>

Можете ли вы предоставить рисунок краской или изображение того, как вы хотите выровнять элементы? Ваше описание не очень понятно.

— 10.12.2020 15:15

html bootstrap-4

10.12.2020 15:11

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете сделать это с помощью сетки или флексбокса, я предлагаю вам использовать сетку, так как легче контролировать ширину заголовка и значка. Проверьте фрагмент ниже:

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">

<div class = "container">
  <div class = "row border border-primary">
    <h1 class = "col-10 text-center border border-secondary">My Title</h1>
    <span class = "col-2 d-flex align-items-center">My Icon</span>
  </div>

</div>

10.12.2020 15:48

<link rel = "stylesheet" href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity = "sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin = "anonymous"/>

<div class = "option1">
<h6 class = "card-title ">Activity <a class = "btn btn-info" href = "#">
    <i class = "fa fa-edit"></i>
</a>
<a class = "btn btn-danger" href = "#">
   <i class = "far fa-trash-alt"></i>
</a></h6> 
</div>

<div class = "option2">
<div style = "float:left">
<h6 class = "card-title" style = "margin-top:0">Activity</h6> 
</div>
<div style = "float:right">
 <a class = "btn btn-info" href = "#">
    <i class = "fa fa-edit"></i>
</a>
<a class = "btn btn-danger" href = "#">
   <i class = "far fa-trash-alt"></i>
</a>
</div>

<script
  src = "https://code.jquery.com/jquery-3.5.1.min.js"
  integrity = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0 = "
  crossorigin = "anonymous"></script>

Я думаю, нам может понадобиться немного больше информации, но это должно помочь вам начать.

10.12.2020 15:55