如何將圖像放在正確的div中？

-1

下部的代碼看起來如下：

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

我需要舒展身體t部分向右，直到屏幕結束，中間圖像水平和垂直。

來源

2017-09-05 tesicg

來自哪裏的@都是@你需要標記，因爲它不是HTML，我們很多人都無法生成，所以無法幫助你。 – Rob

假設你的意思是垂直對齊：殺死float，設置絕對位置，設置一個明確的height，顯示block（如果需要的話），聲明底部的0。如果您不關心舊版瀏覽器的兼容性和支持，「flex」也是您可以探索的解決方案。 – UncaughtTypeError

這是MVC，在這個問題上並不重要。 – tesicg

您可以text-center類引導做

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

來源

2017-09-05 12:26:59

它不起作用。 – tesicg

使用

text-align: center;

在

.contentRightPart

還，刪除width: auto;

來源

2017-09-05 12:29:10 Subha

它不起作用。 – tesicg

移除「width：auto」並嘗試按原樣保留「text-align：center」。 – Subha

它只是水平居中。如何垂直居中？ – tesicg

你可以做到這一點CSS使用以下代碼： .contentRightPart { border：3px solid blue; top：0; left：0; 寬度：自動; 身高：100％; margin：0; 填充：0; text-align：center; float：none; }

來源

2017-09-05 12:38:14

它只是水平居中。如何垂直居中？ – tesicg

如何將圖像放在正確的div中？

回答

相關問題