css - 如何在右侧div中居中图像？

Question

屏幕如下所示:

下半部分代码如下:

1) HTML:

<div class="content">
    <div class="contentLeftPart">
        @using (Html.BeginForm("Login", "Account", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div class="form-group">
                @Html.LabelFor(m => m.UserName, new {@class = "col-md-2 control-label"})
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.UserName, new {autofocus = "autofocus", @class = "textinput"})
                    @Html.ValidationMessageFor(m => m.UserName)
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Password, new {@class = "col-md-2 control-label"})
                <div class="col-md-10">
                    @Html.PasswordFor(m => m.Password, new {@class = "textinput"})
                    @Html.ValidationMessageFor(m => m.Password)
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <div class="checkbox">
                        @Html.CheckBoxFor(m => m.RememberMe)
                        @Html.LabelFor(m => m.RememberMe)
                    </div>
                </div>
            </div>
            <p class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input class="btn" type="submit" value="Логин"/>
                </div>
            </p>
        }
    </div>
    <div class="contentRightPart">
        <img src="../../Images/team.jpg" />
    </div>
</div>

2) CSS:

.content
{
    top: 0;
    left: 0;
    width: 100%;
    height: 95%;
    margin: 0;
    padding: 0;
}

.contentLeftPart
{
    float: left;
    border: 3px solid black;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #d5f5e3;
}

.contentRightPart
{
    float: left;
    border: 3px solid blue;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
}

我需要将右侧部分向右拉伸(stretch)直到屏幕末尾，并在其中水平和垂直居中图像。

Answer 1

你可以使用 text-center 类的 Bootstrap

<div class="contentRightPart">
    <div class="text-center">
        <img src="../../Images/team.jpg" />
    </div>
</div>