Question

这只是Mozilla Firefox中的一个问题（最新测试）。

我想要一个布局菜单项，其中包含四列垂直居中的文本。

我会沿着'display: table' 'vertical-align:middle'路线走下去，但这会阻止我在需要时应用截断，如果可能的话，我宁愿不添加额外的包装元素。

我使用以下CSS在菜单项中实现垂直居中，这会强制菜单项之间的列中断：

display: flex;

align-items: center;
// or 
flex-direction: column;
justify-content: center;

请参阅Codepen（启用第20行或位于24-25）打破布局......

http://codepen.io/achisholm/pen/JXzGwE

修改

因此，我可以通过垂直居中来实现所需的布局＆＃39; hack＆＃39;但是如果可能的话，我更愿意使用Flexbox。

http://codepen.io/achisholm/pen/mPoPPz?editors=1100

我已准备好将其归结为一个错误，因为所有其他现代浏览器都会按照您的预期显示。虽然我很想知道它为什么会发生以及它是否因特定原因而发生。

Answer 1

根据4. Rules for Breaking：

某些内容不可分片，例如许多类型的replaced elements（例如图片或视频），可滚动元素或   单行文字内容。此类内容被视为 monolithic ：   它没有可能的断点。在这样的任何强制休息   因此盒子不能分开盒子，因此也必须如此   被盒子自己的碎片化背景所忽略。

除了通常不可分割的任何内容之外，UAs   可以将monolithic设置为overflow的任何元素视为logical height   到auto或scroll以及overflow: hidden和a的任何元素   非 - auto inline-block（并且没有指定的最大逻辑   高度）。

由于行框不包含可能的断点，inline-table   和display types框（以及建立新formatting context的其他内联级monolithic）也可能是   考虑GCyrillus commented。

所以你可以使用

.menu-item {
  overflow: hidden;
}

html, body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
nav {
  height: 100%;
  -webkit-columns: 4;
     -moz-columns: 4;
          columns: 4;
}
.menu-item {
  padding: 0 20px;
  height: 8.333%;
  border: 1px solid gainsboro;
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

<nav>
  <a class="menu-item"><p>Menu item 1</p></a>
  <a class="menu-item"><p>Menu item 2</p></a>
  <a class="menu-item"><p>Menu item 3</p></a>
  <a class="menu-item"><p>Menu item 4</p></a>
  <a class="menu-item"><p>Menu item 5</p></a>
  <a class="menu-item"><p>Menu item 6</p></a>
  <a class="menu-item"><p>Menu item 7</p></a>
  <a class="menu-item"><p>Menu item 8</p></a>
  <a class="menu-item"><p>Menu item 9</p></a>
  <a class="menu-item"><p>Menu item 10</p></a>
  <a class="menu-item"><p>Menu item 11</p></a>
  <a class="menu-item"><p>Menu item 12</p></a>
  <a class="menu-item"><p>Menu item 13</p></a>
  <a class="menu-item"><p>Menu item 14</p></a>
  <a class="menu-item"><p>Menu item 15</p></a>
  <a class="menu-item"><p>Menu item 16</p></a>
  <a class="menu-item"><p>Menu item 17</p></a>
  <a class="menu-item"><p>Menu item 18</p></a>
  <a class="menu-item"><p>Menu item 19</p></a>
  <a class="menu-item"><p>Menu item 20</p></a>
  <a class="menu-item"><p>Menu item 21</p></a>
  <a class="menu-item"><p>Menu item 22</p></a>
  <a class="menu-item"><p>Menu item 23</p></a>
  <a class="menu-item"><p>Menu item 24</p></a>
  <a class="menu-item"><p>Menu item 25</p></a>
  <a class="menu-item"><p>Menu item 26</p></a>
  <a class="menu-item"><p>Menu item 27</p></a>
  <a class="menu-item"><p>Menu item 28</p></a>
  <a class="menu-item"><p>Menu item 29</p></a>
  <a class="menu-item"><p>Menu item 30</p></a>
  <a class="menu-item"><p>Menu item 31</p></a>
  <a class="menu-item"><p>Menu item 32</p></a>
  <a class="menu-item"><p>Menu item 33</p></a>
  <a class="menu-item"><p>Menu item 34</p></a>
  <a class="menu-item"><p>Menu item 35</p></a>
  <a class="menu-item"><p>Menu item 36</p></a>
  <a class="menu-item"><p>Menu item 37</p></a>
  <a class="menu-item"><p>Menu item 38</p></a>
  <a class="menu-item"><p>Menu item 39</p></a>
  <a class="menu-item"><p>Menu item 40</p></a>
  <a class="menu-item"><p>Menu item 41</p></a>
  <a class="menu-item"><p>Menu item 42</p></a>
  <a class="menu-item"><p>Menu item 43</p></a>
  <a class="menu-item"><p>Menu item 44</p></a>
  <a class="menu-item"><p>Menu item 45</p></a>
  <a class="menu-item"><p>Menu item 46</p></a>
  <a class="menu-item"><p>Menu item 47</p></a>
</nav>

或者，this thread on Xamarin Forums，

.menu-item {
  display: inline-flex;
  width: 100%;
}

html, body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
nav {
  height: 100%;
  -webkit-columns: 4;
     -moz-columns: 4;
          columns: 4;
}
.menu-item {
  padding: 0 20px;
  height: 8.333%;
  border: 1px solid gainsboro;
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

<nav>
  <a class="menu-item"><p>Menu item 1</p></a>
  <a class="menu-item"><p>Menu item 2</p></a>
  <a class="menu-item"><p>Menu item 3</p></a>
  <a class="menu-item"><p>Menu item 4</p></a>
  <a class="menu-item"><p>Menu item 5</p></a>
  <a class="menu-item"><p>Menu item 6</p></a>
  <a class="menu-item"><p>Menu item 7</p></a>
  <a class="menu-item"><p>Menu item 8</p></a>
  <a class="menu-item"><p>Menu item 9</p></a>
  <a class="menu-item"><p>Menu item 10</p></a>
  <a class="menu-item"><p>Menu item 11</p></a>
  <a class="menu-item"><p>Menu item 12</p></a>
  <a class="menu-item"><p>Menu item 13</p></a>
  <a class="menu-item"><p>Menu item 14</p></a>
  <a class="menu-item"><p>Menu item 15</p></a>
  <a class="menu-item"><p>Menu item 16</p></a>
  <a class="menu-item"><p>Menu item 17</p></a>
  <a class="menu-item"><p>Menu item 18</p></a>
  <a class="menu-item"><p>Menu item 19</p></a>
  <a class="menu-item"><p>Menu item 20</p></a>
  <a class="menu-item"><p>Menu item 21</p></a>
  <a class="menu-item"><p>Menu item 22</p></a>
  <a class="menu-item"><p>Menu item 23</p></a>
  <a class="menu-item"><p>Menu item 24</p></a>
  <a class="menu-item"><p>Menu item 25</p></a>
  <a class="menu-item"><p>Menu item 26</p></a>
  <a class="menu-item"><p>Menu item 27</p></a>
  <a class="menu-item"><p>Menu item 28</p></a>
  <a class="menu-item"><p>Menu item 29</p></a>
  <a class="menu-item"><p>Menu item 30</p></a>
  <a class="menu-item"><p>Menu item 31</p></a>
  <a class="menu-item"><p>Menu item 32</p></a>
  <a class="menu-item"><p>Menu item 33</p></a>
  <a class="menu-item"><p>Menu item 34</p></a>
  <a class="menu-item"><p>Menu item 35</p></a>
  <a class="menu-item"><p>Menu item 36</p></a>
  <a class="menu-item"><p>Menu item 37</p></a>
  <a class="menu-item"><p>Menu item 38</p></a>
  <a class="menu-item"><p>Menu item 39</p></a>
  <a class="menu-item"><p>Menu item 40</p></a>
  <a class="menu-item"><p>Menu item 41</p></a>
  <a class="menu-item"><p>Menu item 42</p></a>
  <a class="menu-item"><p>Menu item 43</p></a>
  <a class="menu-item"><p>Menu item 44</p></a>
  <a class="menu-item"><p>Menu item 45</p></a>
  <a class="menu-item"><p>Menu item 46</p></a>
  <a class="menu-item"><p>Menu item 47</p></a>
</nav>

使用CSS列＆＃39; page-break-inside＆＃39;不适用于Flexbox＆＃39; align-items：center＆＃39;

1 个答案: