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

时间:2017-09-05 12:25:10

标签: css

屏幕显示如下:

enter image description here

下半部分的代码如下:

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

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

使用

text-align: center;

in

.contentRightPart

另外,请删除width: auto;

答案 2 :(得分:0)

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