如何在 div 中“左居中”对齐包装的内联块答案

【问题标题】：How to "left-center" align wrapped inline-blocks within a div如何在 div 中“左居中”对齐包装的内联块
【发布时间】：2015-07-27 23:48:08
【问题描述】：

我看到过一些与此类似的问题，但大多数似乎都缺少能够彻底显示问题所在的图像。

我试图让以下响应式布局在狭窄时工作。现在看起来像这样：

这就是我想要的样子。请注意，字段和标签的左边缘彼此对齐，但它们一起相对于其他所有内容居中。

最后，当父 div 很宽时，它必须看起来像这样（这是有效的）：

这是我的代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style type="text/css">
    .CalibrationPointStep {
      text-align: center;
    }

    .CalibrationPointStep > .table {
      display: table;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }

    .CalibrationPointStep > .table > .raw {
      margin-right: 15px;
      margin-bottom: 10px;
    }

    .CalibrationPointStep > .table > .raw,
    .CalibrationPointStep > .table > .actual {
      display: inline-block;
    }

    .CalibrationPointStep > .table > .raw > .header,
    .CalibrationPointStep > .table > .actual > .header {
      text-align: left;
      display: block;
      font-weight: bold;
    }

    .CalibrationPointStep > .table > .raw > .value {
    .CalibrationPointStep > .table > .actual > .value {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="CalibrationPointStep">
    <h3>Step 1</h3>
    <p>Go to a known low state, and enter the actual value.</p>
    <div class="table">
      <div class="raw">
        <div class="header">Raw Value</div>
        <div class="value">
          <input type="number" readOnly /> counts
        </div>
      </div>
      <div class="actual">
        <div class="header">Actual Value</div>
        <div class="value">
          <input type="number" /> kips
        </div>
      </div>
    </div>
  </div>
</html>

请注意，如果我从 .CalibrationPointStep > .table 中删除 text-align: left，它看起来像这样，我也不想要：

问题似乎在于，当必须换行其中一个内联块 div 时，父 div 的宽度会截断为可用的最大值，而不是跨越其子级的最小宽度。

如果可能的话，我想要一个适用于 IE8+ 的解决方案。但如果这不可能，我仍然对更现代的浏览器的解决方案感到好奇。

【问题讨论】：

标签： html css responsive-design alignment

【解决方案1】：

试试这个：

.CalibrationPointStep {
    text-align: center;
}
.raw,
.actual {
    width: 200px;
    display: inline-block;
}
.header,
.value {
    text-align: left;
}
.header {
    font-weight: bold;
}
input {
    margin-left: 0;
}

Fiddle.

另外，在实际项目中，您不希望为一个元素堆积所有 CSS 选择器，因为这会使您的 CSS 变得不必要地复杂，从而难以组织和维护。在大多数情况下，只需选择一个最合适且具有描述性的类就足够了。

【讨论】：

哦，我明白了。但是有没有办法在没有固定宽度的情况下做到这一点，这样它就可以完美地适用于输入之后的任何单位文本（“counts”、“kips”、“gallons/min”等）我从来没有 100% 开心在 CSS 中使用硬编码的尺寸，尤其是在尝试进行响应式布局时……在我的桌面编程时代，我从来不需要这样的技巧来解决布局问题，因为我可以在实际代码中执行布局。
或者有没有办法让所有的div都和最宽的div一样宽？
还有这么多的 CSS 选择器，因为我实际上使用的是 React/Sass，并且我试图至少命名我所有的 React 组件。希望最终我们能从 Web 组件革命中获得本地范围的 CSS。
嗯，响应式设计主要处理用户设备的不确定性，而不是您的内容。当然，您可以将固定宽度更改为某个百分比，例如40%。但在这种情况下，您不能同时对齐文本字段和标签中心并将标签左对齐到文本字段 - 因为在设计时控件的实际宽度是未知的。
对于上述情况，我提出了三种可能的解决方案：利用一些像 Bootstrap 这样的网格系统（这会给你一些有限的灵活性），使用 CSS calc（这不是在 IE10 之前完全支持）或 JavaScript 来做一些高级布局。