css - 在其他元素居中时将文本设置为左侧 - CSS - Bootstrap 4

Question

我认为我尝试做的事情非常简单。在下图中，我希望描述“Print Flags”位于框的左侧，按钮位于右侧居中:

但这已经是我所能得到的最接近的了。

这是我的代码(当前):

<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(尽管代码片段看起来正确)我将上面的代码更新为最新的:

Answer 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>