2

我有一个水平居中div的两个孩子。每个孩子都垂直居中，display: table-cell并且vertical-align:middle

当屏幕（或父容器）足够宽以使所有文本都在一行上时，一切正常。但是，如果屏幕/父级缩小，则文本会换行并留下大量空白。为什么 div 不缩小以适应文本？

下图显示了问题。一切都是我在顶部图像中想要的方式。灰色部分包裹内容，并在其父容器中居中。但是，如果父级缩小以使文本换行，则会留下一堆空白（请参见红色矩形中突出显示的区域）。这个空白会造成整个元素左对齐而不是居中的错觉。

到目前为止，我有一个 jsFiddle 示例：http: //jsfiddle.net/eterpstra/pRgeL/1/

有什么办法可以摆脱这个空白，让一切看起来更居中，而不是向左移动？

在此处输入图像描述

4

2 回答 2

2

正如@andi 所写，浏览器以一种有点奇怪的方式进行表格布局。这可以仅使用 HTML 中的单个单元格表来演示：

<div style="width: 270px; background: yellow">
<table>
<tr><td style="font-size: 25px; border: solid 1px">Way too much white space
</table>
</div>

浏览器首先尝试将所有文​​本设置在同一行，分配可用宽度（这里是270px），然后发现需要换行，然后忘记根据最长行的长度调低单元格宽度的内容。

在内容中放置一个<br>标签（在断行的点）会“解决”这个问题，但是这样使用固定的换行符会是糟糕的设计，非常不灵活。

似乎可以通过在单元格内使用内部span元素并将单元格的style.width属性设置为等于元素的offsetWidth属性，并附加单元来解决此问题：spanpx

<div style="width: 270px; background: yellow">
<table>
<tr><td id=cell style="font-size: 25px; border: solid 1px"><span id=t>Way too much white
  space</span>
</table>
</div>
<script>
 document.getElementById('cell').style.width = 
   document.getElementById('t').offsetWidth + 'px';
</script>

jsfiddle

对于一般的解决方案，我想您可以编写一个脚本来遍历可能需要修复的td元素（或用 显示的元素），而不是像上面这样的特定编码，动态插入一个元素，然后进行修复。像这样，为了明确起见，假设您的表格单元格都是元素并且具有可以安全地包含在元素中的内容：display: table-cellspantdspan

<script>
var cells = document.getElementsByTagName('td');
for(var i = 0; i < cells.length; i++) {
  var cell = cells[i];
  var span = document.createElement('span');
  span.innerHTML = cell.innerHTML;
  cell.innerHTML = span.outerHTML;
}
for(var i = 0; i < cells.length; i++) {
  var cell = cells[i];
  cell.style.width = cell.childNodes[0].offsetWidth + 'px';
}
</script>
于 2013-10-02T20:30:24.710 回答
1

看起来浏览器会增加该灰色部分（.header-wrap）的宽度，直到它达到 .header （您在 CSS 中设置）的宽度的 100%。如果 .header-wrap 中的文本仍然太长，它会换行，但 .header-wrap 的宽度将保持在全宽，而不是缩小以适应。我认为这是有道理的。

我会说你最好的选择是使用text-align: center;并且不要担心额外的空白。我认为在这种确切的情况下您无能为力。

于 2013-10-02T19:43:27.660 回答