無法使用顯示使div中心對齊：表

我正在使用顯示錶格和表格單元verticle-align中間使div中心對齊。但中心div不位於中心。無法使用顯示使div中心對齊：表

小提琴：Here

的CSS：

.landing-right { 
    position: relative; 
    padding: 50px 0px; 
    float: left; 
    display: table; 
    width: 365px; 
    height: 100%; 
    margin-left: -70px; 
} 
.landing-img { 
    height: 420px; 
    position: relative; 
    float: left; 
    width: 100%; 
    background-repeat: no-repeat; 
    border: 15px solid #fff; 
    display: table-cell; 
    vertical-align: middle; 
}

HTML：

<div class="landing-right"> 
      <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">     
</div>

來源

2017-05-20 Bhawna

你應該使用margin: auto;的靜態寬度股利和刪除float: left;。它將水平居中。但是垂直中心對齊更困難，你應該使用類似this one的東西。

編輯：你沒有提到哪個div需要居中。這是對的.landing-right

來源

2017-05-20 07:19:12 Rafe

有幾個問題.landing-right中間對齊的解決方案：

它float: left。如果它需要水平居中，則不應定義此CSS規則。
它有margin-left: -70px這使它向左偏移70px。這是沒有必要的，如果元素需要水平居中，應該刪除。
沒有定義CSS規則來水平居中元素，最簡單的實現方法是使用margin: 0 auto。

對於垂直中心，代碼運行良好。

這裏是一個代碼段，這使得爲您的情況下的水平和垂直中心的圖像：

.landing-main { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    background: #fefefe; 
 
} 
 
.landing-right { 
 
    position: relative; 
 
    padding: 50px 0px; 
 
    display: table; 
 
    width: 365px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.landing-img { 
 
    height: 420px; 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    background-repeat: no-repeat; 
 
    border: 15px solid #fff; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.landing-inner { 
 
    width: 100%; 
 
    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.4); 
 
    padding: 40px 0px; 
 
    min-height: 100vh; 
 
    background: #f8f8f8; 
 
}

<div class="landing-main"> 
 

 
<div class="landing-inner"> 
 
<div class="landing-right"> 
 
      <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);"> 
 
      
 
      </div> 
 
     </div> 
 
     </div></div>

來源

2017-05-20 07:28:06 shaochuancs

嘗試使用此代碼段：

.landing-right { 
    position: relative; 
    display: table; 
    width: 365px; 
    margin: 0 auto; 
}

來源

2017-05-20 07:35:50 Learner

**來自評論隊列：**我可以請求您請您在答案中添加更多的上下文。僅有代碼的答案很難理解。如果您可以在帖子中添加更多信息，它可以幫助提問者和未來的讀者。 –

在CSS一級登陸權，你需要進行修改，它應該是這樣的 -

.landing-right { 
    position: relative; 
    padding: 50px 0px; 
    display: table; 
    width: 365px; 
    height: 100%; 
    margin-left: auto; 
}

通過保持浮動：左，你讓你的div粘到屏幕的左邊，在頂部有margin-left：-70px;將永遠不會讓你的div中間，保持它自動，所以div可以有邊緣的範圍，並沒有左div的浮動將直接在屏幕中間。

來源

2017-05-20 12:34:11

無法使用顯示使div中心對齊：表

回答

相關問題