Javascript 如果元素变得比窗口宽，则在DIV中居中元素，而不切断左侧内容

参考：

在我的示例中，当您减小窗口的宽度时，左侧的内容将被切断。我想在需要时滚动条，但内容要移动，以便表的左边缘位置不会变为负值。在这种情况下，表格未居中

内容将是动态的（文本长度），移动/桌面案例是其原因。唯一的解决方案是基于窗口宽度设置动态Javascript吗？是否有其他方法不使用left:-50%将表格元素居中

<div class="emergencyContainer">
  <table>
    <tr>
      <td class="emergencyCol1"><h3>Service:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="tel:1-800-555-5555">1-800-555-5555</a></h3></td>
    </tr>
    <tr>
      <td class="emergencyCol1"><h3>Website:</h3></td>
      <td class="emergencyCol2"><h3><a target="_blank" href="http://www.test.com">http://www.test.com/</a></h3></td>
    </tr>
  </table></div>

---

当您需要根据是否显示元素（例如横向条）来调整大小时，JavaScript会提供很大帮助。正如您所说的，随着窗口的调整，您可以动态调整表的大小。是，将

onresize

事件添加到窗口，并将容器（甚至主体）宽度值设置为

window.innerWidth

属性的百分比值

---

相信我。设置百分比并不能起作用。我想的是那些改变样式的事件，比如调整窗口大小，都是由JavaScript事件控制的。我并不认为CSS是动态的。即使如此，您也可以检查它是否对您起作用（或编写我在上面编写的脚本）

检查此代码。我只更改emergencycontainer和表css

.emergencyCol1{
保证金：0；
填充：0；
文本对齐：右对齐；
高度：1.5em；
空白：nowrap；
}
.紧急情况2{
保证金：0；
左侧填充：0.3em；
文本对齐：左对齐；
高度：1.5em；
空白：nowrap；
}
.应急集装箱{
溢出：自动；
}
.emergencyContainer>表{
保证金：自动；
}

服务：
网站长度：

所以基本上，当窗口小于页面时，您需要一个滚动条？滚动条工作正常，但即使使用滚动条，左边的内容也会被切掉。在小提琴中，调整窗口，使其变小，你就会看到。查看答案@Steve

.emergencyCol1 {
    margin:0;
    padding:0;
  text-align:right;
    height: 1.5em;
  white-space: nowrap;
}

.emergencyCol2 {
    margin:0;
    padding-left: 0.3em;
    text-align: left;
    height: 1.5em;
  white-space: nowrap;
}
.emergencyContainer{
  float: right;

  position: relative;
  left: -50%; 
  text-align: left;
}
.emergencyContainer > table {
  position: relative;
  left: 50%;

}