Wie zentriert man das Bild in der rechten Div?

Question

Der Bildschirm sieht wie folgt:

Der Code des unteren Teils sieht wie folgt:

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

Ich muss richtig strecken t Teil nach rechts bis zum Ende des Bildschirms und Mitte Bild horizontal und vertikal in ihm.

Answer 1

Sie können

mit text-center Klasse von Bootstrap tun

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

Answer 2

Verwenden

text-align: center; 

in

.contentRightPart 

auch, entfernen width: auto;

Answer 3

Sie es tun können CSS mit dem folgenden Code: .contentRightPart { Rahmen: 3px solid blau; oben: 0; links: 0; Breite: Auto; Höhe: 100%; Rand: 0; Polsterung: 0; Textausrichtung: Mitte; Float: keine; }