Question

我正在使用引导div，但无法使div的内容居中（在height上）。我看了很多问题，但我所做的一切都改变了一件事，却打破了另一件事。

这里是它的外观图片（我希望将电影详细信息以及管理选项置于中心）：

这里是相关代码：

@foreach (var item in Model)
{
<div class="col-xs-12">
    <hr />
    <h3>@Html.ActionLink(item.MovieName, "GetMovieById", new { Id = item.MovieId }):</h3>
    <br/>
    <div class="col-xs-3">
        <a href="@Url.Action("GetMovieById/" + item.MovieId, "Movie")">
            <img src="@item.Picture.PictureName" style="width:100%;height:30%; " />
        </a>
    </div>

    <div class="col-xs-5">
        <dl class="dl-horizontal">
             <dt>
                @Html.DisplayNameFor(modelItem => item.Genre.GenreName)
            </dt>
            <dd>
                @Html.DisplayFor(modelItem => item.Genre.GenreName)
            </dd>
            <dt>
                Movie Rating
            </dt>
            <dd>
                @(item.Review.Count() == 0 ? "No reviews yet" : ((double)item.Review.Sum(m => m.ReviewRating) / item.Review.Count()).ToString())
            </dd>
            <dt>
                @Html.DisplayNameFor(modelItem => item.MovieDuration) (Min)
            </dt>

            <dd>
                @Html.DisplayFor(modelItem => item.MovieDuration)
            </dd>
            <dt>
                @Html.DisplayNameFor(modelItem => item.YearOfPublish)
            </dt>

            <dd>
                @Html.DisplayFor(modelItem => item.YearOfPublish)
            </dd>
            <dt>
                Writers
            </dt>
            <dd>
                @foreach (var writer in item.Writer)
                {
                    @Html.ActionLink(writer.WriterName, "GetWriterById", "Writer", new { Id = writer.WriterId }, null)
                    if (writer != item.Writer.Last())
                    {
                        <tab>,</tab>
                    }
                }
            </dd>

            <dt>
                Directors
            </dt>
            <dd>
                @foreach (var director in item.Director)
                {
                    @Html.ActionLink(director.DirectorName, "GetDirectorById", "Director", new { Id = director.DirectorId }, null)
                    if (director != item.Director.Last())
                    {
                        <tab>,</tab>
                    }
                }
            </dd>
            <dt>
                Actors
            </dt>
            <dd>
                @foreach (var actor in item.Actor)
                {
                    @Html.ActionLink(actor.ActorName, "GetActorById", "Actor", new { Id = actor.ActorId }, null)
                    if (actor != item.Actor.Last())
                    {
                        <tab>,</tab>
                    }
                }
            </dd>
        </dl>
    </div>
    <div class="col-xs-4" >

        @if (ViewBag.isAdmin == "true")
        {
        <p>
            @Html.ActionLink("Edit", "Edit", new { id = item.MovieId }) |
            @Html.ActionLink("Change crew", "ChangeMovieCast", new { id = item.MovieId }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.MovieId })
        </p>
        }
    </div>
</div>

Answer 1

您需要在包含列的行元素上使用Bootstrap的flexbox mechanisms：

<row class="align-items-center">

Fiddle demo

如何在列中垂直居中放置内容？

1 个答案: