Установить текст слева, а другие элементы - по центру - CSS - Bootstrap 4

Я думал, что то, что я пытался сделать, было довольно простым. На изображении ниже я хочу, чтобы описание «Печатать флаги» было слева от поля, а кнопки располагались по центру справа: Установить текст слева, а другие элементы - по центру - CSS - Bootstrap 4

Но это настолько близко, насколько я смог понять.

Вот мой код (на данный момент):

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">


 <div class = "col" style = "position: relative; text-align: center; border-style: solid; border-width: thin">
                <div  style = "position: absolute; left: 0px;  background-color: #ff8c00; font-weight: bold;">Print Flags
                </div>
                    <kendo-button name = "printTrue" type = "button" onclick = "FlipAllPrintFlags(1)">All Print To True</kendo-button>
                    <kendo-button name = "printFalse" type = "button" onclick = "FlipAllPrintFlags(2)"> All Print To False</kendo-button>
            </div>

Используя предложенный ответ, он приблизил меня, однако он перестал заполнять div по вертикали (хотя фрагмент кода выглядит правильно). Я обновил свой код до последней версии:

Установить текст слева, а другие элементы - по центру - CSS - Bootstrap 4

css bootstrap-4

30.12.2018 18:54

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Я надеюсь, что это поможет вам...

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel = "stylesheet" href = "http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">


<div class = "col" style = "position: relative; text-align: center; border-style: solid; border-width: thin;">
    <div  style = "position: absolute;left: 5px;top: 50%; transform: translateY(-50%)">
        Print Flags
    </div>
    <kendo-button name = "printTrue" type = "button" onclick = "FlipAllPrintFlags(1)">All Print To True</kendo-button>
    <kendo-button name = "printFalse" type = "button" onclick = "FlipAllPrintFlags(2)">All Print To False</kendo-button>
</div>

Это, безусловно, приближает меня. Я обновлю вопрос, что он делает ...

— 30.12.2018 19:32

@JoeRuder Я обновил свой ответ, и это решит проблему с вертикальным выравниванием.

— 30.12.2018 19:43

Спасибо - добавил padding: 5px; и это выглядит идеально в сочетании с вашими изменениями.

— 30.12.2018 19:50

30.12.2018 19:17