html - 如何在列中垂直居中内容？

问题描述

我正在使用引导 div，我无法让 div 的内容居中（高度）。我看了很多问题，但我改变的一切都解决了一个问题，破坏了另一个..

这是它的外观图片（我希望电影细节以及管理选项居中）：

这里是相关的代码：

@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>

标签： htmlcssbootstrap-4

html - 如何在列中垂直居中内容？

问题描述

解决方案

推荐阅读