如何 "left-center" 在 div 中对齐包裹的 inline-blocks

Question

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

我正在尝试让以下响应式布局在变窄时起作用。现在看起来像这样：

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

最后，这是当父级 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，它看起来像这样，我也不想要：

问题似乎在于，当 inline-block div 之一必须换行时，父 div 的宽度会截断为可用的最大值，而不是跨越其子项的最小宽度。

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

Answer 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 不必要地复杂化，因此难以组织和维护。在大多数情况下，只需选择一个最合适和描述性的 class 就足够了。

如何 "left-center" 在 div 中对齐包裹的 inline-blocks

How to "left-center" align wrapped inline-blocks within a div

html

css

alignment

responsive-design