Html 为什么文本换行时表格单元格中会有额外的空白？

我有一个水平居中的

div

，有两个孩子。每个子项都垂直居中于

display:table cell

和

vertical align:middle

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

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

到目前为止，我已经有了一个JSFIDLE示例：

有没有办法去掉这个空白，让所有的东西看起来更居中，而不是向左移动

---

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

---

我认为你最好的选择是使用

text-align:center并且不用担心额外的空白。我不认为在这种情况下你能做什么。
正如@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>


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

<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>


var cells=document.getElementsByTagName（'td'）；
对于（变量i=0；i
您可以使用
文本对齐：居中
和可能更改一些填充是否已尝试从
中删除填充。站点标题
？@ExplosionPills text align:center也有同样的问题，空白太多，但这一次在两端。@SimonAdcock是的，我尝试过。没有区别。
<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>