水平和垂直居中对齐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电网

回答

相关问题