嵌套<div>中的文本对齐

时间:2018-12-21 10:23:21

标签: html bootstrap-4

我无法在代码中将图像和文本字段对齐到中心。我尝试过风格和课程,但没有成功。我正在使用最新的引导程序。有人可以建议我吗?我似乎找不到明确的答案。

谢谢

<div class="container">
    <div class="row">
        @foreach (var item in Model.Product)
        {
            <div class="col-md-4">

                <div class="row border-bottom border-top border-left border-right">
                    <a style="margin-top: 10px; margin-bottom: 10px; text-align: center">@Html.DisplayFor(x => item.ProductName)</a>
                </div>

                <div class="row border-left border-right">
                    <img src="images/ImagesOriginal/@item.ProductImageName" style="margin-top: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px" />
                </div>

                <div class="row text-danger border-bottom border-top border-left border-right font-weight-bold" style="margin-bottom: 40px">
                    <a style="margin-top: 10px; margin-bottom: 10px; vertical-align: center">@Html.DisplayFor(x => item.ProductPrice)</a>
                </div>
            </div>
        }
    </div>
</div>

0 个答案:

没有答案