Html 引导4-如何使文本彼此处于相对位置？

我有一段代码：

<div class="container">
    <div class="border rounded-lg" style="height:500px;">
        <div class="ml-2 mt-2">
            <h1 class="display-3">@Model.Name</h1>
            <!-- Image and pay box -->
            <div class="mt-4 container">
                <img src="~/Resources/default.jpg" class="" style="height:300px;" />
                <div class="d-inline align-top float-right border rounded-lg" style="height:250px;width:250px;">
                    @if (!Model.OnSale)
                    {
                        <h3 class="mt-2 text-nowrap text-center text-warning">@Model.Price</h3>
                    }
                    else
                    {
                        <div class="row">
                            <div class="col-2 text-center">
                                <div class="text-secondary font-italic" style="text-align:center;"><s>@Model.PriceBeforeDiscount</s></div>
                                <div class="mt-2 text-nowrap text-warning">@Model.Price</div>
                            </div>
                        </div>
                    }
                    <button class="btn btn-success text-white text-center font-weight-bold w-100 mt-3">
                        BUY NOW
                    </button>

给定一个模型，它看起来像

---

我想把价格文本和右边的文本都放在中间，但出于某种原因，它会拒绝使用文本中心，有没有办法解决这个问题？@符号只是来自Razor语法，它是它显示的变量

文本价格在代码中居中对齐，但它们受到列宽的限制

col-2应为col-12，因此：

我无法在此处重新创建代码，但已在本地对其进行了测试，col-12似乎可以解决此问题

您尝试过吗

这应该行得通

@if (!Model.OnSale)
{
    <h3 class="mt-2 text-nowrap text-center text-warning">@Model.Price</h3>
}
else
{
    <div class="row">
        <div class="col-12 text-center">
            <div class="text-secondary font-italic"><s>@Model.PriceBeforeDiscount</s></div>
            <div class="mt-2 text-nowrap text-warning">@Model.Price</div>
        </div>
    </div>
}