我见过一些与此类似的问题，但大多数问题似乎都缺少能够彻底显示问题所在的图片。
我正在尝试让以下响应式布局在变窄时起作用。现在看起来像这样:
这就是我想要的样子。请注意，字段和标签的左边缘彼此对齐，但它们相对于其他所有内容都居中。
最后，这是当父 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，它看起来像这样，我也不想要:
问题似乎在于，当其中一个内联 block div 必须换行时，父 div 的宽度会截断为最大可用宽度，而不是跨越其子元素的最小宽度。
如果可能，我想要一个适用于 IE8+ 的解决方案。但如果这不可能，我仍然对更现代浏览器的解决方案感到好奇。
最佳答案
试试这个:
.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 变得不必要地复杂，从而难以组织和维护。在大多数情况下，只需选择一个最合适的描述性类就足够了。
关于html - 如何 "left-center"在 div 中对齐包装的内联 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30269898/