水平和垂直居中對齊DIV電網

我知道這是一個非常古老的問題，有幾種方法來這個喜歡用「柔性」或固定高度等水平和垂直居中對齊DIV電網

但我發現自己一個新的解決方案，需要了解是否確定用這樣的方式：

div.parent { 
display:table; 
text-align:center; 
} 
div.child { 
display:inline-block; 
vertical-align:middle; 
width:33%; 
}

這我之所以開這個話題是學習什麼是使用的弊端「顯示：表」父DIV。因爲沒有它，多個「子」divs由於未知的額外顯示而摺疊：內嵌塊邊距。

這種方法就像魅力與幾乎所有的現代瀏覽器但我還沒有遇到過的。所以只需要確保它可以正常使用。

編輯：我添加寬度值到孩子

演示： https://jsfiddle.net/tcd8jkeb/

來源

2016-06-10 Mertafor

你可以張貼某種形式的小提琴？ – potashin

這個問題是不是太廣，**意見基於**或需要討論，所以是題外話堆棧溢出。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

我添加了Jsfiddle並修復了CSS樣式。 @Paulie_D你說得對，但也有了解，如果我失去了一些東西在這裏 – Mertafor

所有display:table所做的是創建一個塊級框「像表」。未做子元素display:table-cell或如此，它不會做任何事情超過display:block一樣。試試看看。

來源

2016-06-10 12:15:31 Rob

這是我的壞需要許多可能的內部元素類型。我忘了給孩子增加寬度值。我還添加了演示。 – Mertafor

div.parent { 
 
display:table; 
 
text-align:center; 
 
} 
 
div.child { 
 
display:table-cell; 
 
vertical-align:middle; 
 
}

<div class="parent"> 
 
    <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and </div> 
 
    <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five </div> 
 

 
    </div>

來源

2016-06-10 12:18:59 Saika

這回答這個問題的方式是什麼？ – Rob

與表單元格的問題是，你只能創建水平塊。 display-inline塊創建一個網格，當寬度比容器寬時摺疊到另一行。我也@Rob – Mertafor

同意雖然這個代碼可能回答這個問題，提供附加的上下文有關_why_和/或_how_它回答問題將顯著改善其長期值。請[編輯]你的答案，添加一些解釋。 –

Do u need like this 

<style> 
    div.parent 
    { 
    display:table; 
    text-align:center; 
    } 
    div.child 
    { 
    display:table-cell; 
    vertical-align:center; 
    } 

    </style> 
    <html> 
    <head> 
    <body> 
    <div class="parent"> 
     <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
     <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and </div> 
     <div class="child">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five </div> 


    </body> 

</head>

來源

2016-06-10 12:42:41 SMS

水平和垂直居中對齊DIV電網

回答

相關問題