0

I am having trouble aligning image and text fields to the center in my code. I tried style and class but to no success. I'm using the latest bootstrap. Anyone can advice me on this? I can't seem to find clear answer to this.

Thanks 

<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>
xcelm
  • 541
  • 1
  • 6
  • 19
  • can you not use the `text-center` class? – Pete Dec 21 '18 at 10:26
  • Have you tried using bootstrap's `align-*` classes? https://getbootstrap.com/docs/4.1/utilities/vertical-align/ . Also, as a side note, you cannot use `margin-top` or `margin-bottom` on `inline` elements like `a` without adding `display:inline-block` – ImClarky Dec 21 '18 at 10:38

0 Answers0