Страницы

Поиск по вопросам

четверг, 2 января 2020 г.

Как в CSS задать размещение элементов в блоке?

#html #css #css3 #html5 #вёрстка


У меня есть html файл, мне нужно, чтобы слово Tasks было по середине блока, а кнопка
по краю, подскажите, пожалуйста, как это сделать

Tasks <%= link_to "+", new_task_path, class: 'btn btn-primary' %>


Ответы

Ответ 1



Можно, например, с помощью абсолютного позиционирования: .col-md-12 { padding: 10px; border: 1px solid red; position: relative; } h1 { text-align: center; } #blog { width: 75px; height: 30px; padding-top: 10px; text-align: center; border: 2px solid blue; border-radius: 10px; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; transition: .5s; cursor: pointer; } #blog:hover { color: white; background-color: blue; }

Tasks

кнопка


Ответ 2



Вариант с использованием flex: .col-md-12 { padding: 10px; border: 1px solid red; display: flex; } h1 { text-align: center; flex-grow: 1; } #blog { width: 75px; height: 30px; text-align: center; border: 2px solid blue; border-radius: 10px; margin: auto; padding-top: 10px; transition: .5s; cursor: pointer; } #blog:hover { color: white; background-color: blue; }

Tasks

кнопка


Комментариев нет:

Отправить комментарий