Question

我知道这是一个非常古老的问题，有几种方法可以使用＆＃34; flex＆＃34;或固定高度等。

但我发现自己是一个新的解决方案，需要了解是否可以这样使用：

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

我开这个主题的原因是要了解使用＆＃34; display：table＆＃34;为父母div。因为没有它，多个＆＃34;孩子＆＃34; div由于未知的额外显示而崩溃：内联块边距。

这种方法与几乎所有现代浏览器的魅力相似，但我以前没遇到过。所以只需要确保它可以使用。

编辑：我为子项添加了宽度值

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

Answer 1

所有display:table都会创建一个块级别框＆＃34;就像一个表＆＃34;。如果没有制作子元素display:table-cell等，它就不会做display:block以外的任何事情。试试吧，看看。

Answer 2

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>

Answer 3

use warnings;
use strict;

my $var = {
            'data' => [
                        {
                          'id' => '312351465029_10154168935475030',
                          'name' => 'Timeline Photos 1'
                        },
                        {
                          'name' => 'Bangchak\'s cover photo',
                          'id' => '312351465029_10154168087455030',
                        },
                        {
                          'id' => '312351465029_10154168081875030',
                          'name' => 'Timeline Photos 2',
                        }
                      ],
            'paging' => {
                          'previous' => 'https://graph.facebook.com/v2.6/312351465029/2',
                          'next' => 'https://graph.facebook.com/v2.6/312351465029/3'
                        }
          };

foreach my $m (@{ $var->{data} }) {
    if ( $m->{name} =~ /Timeline/i )
    {
        print "id = $m->{id}\n";
    }
}

__END__

id = 312351465029_10154168935475030
id = 312351465029_10154168081875030

水平和垂直居中对齐DIV网格

3 个答案: