#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
кнопка
Комментариев нет:
Отправить комментарий