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;
}

我需要将右侧部分向右伸展，直到屏幕结束，并将图像水平和垂直居中。

Answer 1

您可以使用text-center类引导程序

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

Answer 2

使用

text-align: center;

in

.contentRightPart

另外，请删除width: auto;

Answer 3

您可以使用以下代码通过CSS执行此操作： .contentRightPart { 边框：3px纯蓝色; 顶部：0; 左：0; 宽度：自动; 身高：100％; 保证金：0; 填充：0; text-align：center; float：none; }

如何将图像置于正确的div中？

3 个答案: