缩略图中的中心图像

Question

这就是我所拥有的（锚内的图像）：

我希望低分辨率图像将像这样居中:(用油漆编辑）


这是剃须刀的观点：

<div>
<div class="row">
    @foreach (var item in Model)
    {
        <div class="col-md-3 ">
            <div class="thumbnail centerThumb" style="height:345px; width:280px;margin-bottom:15px">
                <div style="height:125px; ">
                    <a href="@Url.Action("Details", "Items", new { id = item.ItemID})">
                        <img src="~/Content/thumbnails/@item.Img" alt="thmbnail" width="255" class="img-rounded centerThumb">
                    </a>
                </div>
                <div class="caption">
                    <h3>@Html.DisplayFor(modelItem => item.Name)</h3>
                    <p style="height:95px">@Html.DisplayFor(modelItem => item.Description)</p>
                    <p style="position:fixed">
                        <a href="#" class="btn btn-primary" role="button">Add to Cart</a>
                    </p>
                    <p style="margin-left:50%"> @Html.DisplayFor(modelItem => item.Price) </p>
                </div>
            </div>
        </div>
    }
</div>

Answer 1

您可以使用.col-md-3:nth-child(4) .thumbnail.centerThumb img { left: 15%; position: relative; top: 25%; }

更改第4个元素

{{1}}

Answer 2

此CSS使您的图像处于中心位置。

.centerThumb {
    text-align: center;
 }

但是根据网页，您的图片在文本后面有一些填充。使用油漆去除图像的填充。那么它会对你有用。