计算机科学课作业：如何实现表单居中且内部内容左对齐？

要实现表单容器水平居中，内部所有元素内容左对齐的效果，你需要调整容器和表单的CSS属性，核心思路是让外层容器负责居中表单，表单自身控制内部内容的对齐方式。

问题分析 #

你当前的CSS代码问题在于：

• #main 设置了 display:inline-block 和 text-align:center，导致内部的标题（h1）、副标题（div）文字也被居中，仅section内的内容左对齐，出现样式不一致。
• 没有给form设置统一的内部对齐规则，导致不同元素的对齐方式混乱。

修正后的代码 #

HTML（无需修改）

<body>
    <div id='main'>
        <form>
            <h1>Title</h1>
            <div>Subtitle</div>
            <section>
                <table>
                    <!-- Table Contents -->
                </table>
            </section>
            <section>
                <!-- Input Tags -->
            </section>
        </form>
    </div>
</body>

CSS

#main {
    width: 100%; /* 让外层容器占满页面宽度，为内部表单居中提供空间 */
    text-align: center; /* 让内部的inline-block元素（form）水平居中 */
}

form {
    display: inline-block; /* 表单宽度自适应内容，避免撑满整个屏幕 */
    text-align: left; /* 统一设置表单内部所有元素内容左对齐 */
}

form section {
    margin: 8px;
    padding: 10px;
    /* 移除text-align:left，因为form已经统一设置了 */
}

效果说明 #

1. #main 占满页面宽度，通过 text-align:center 让内部的form（inline-block元素）水平居中。
2. form设置为 inline-block 后，宽度由内部内容决定，不会拉伸到页面边缘。
3. form的 text-align:left 会让所有子元素（h1、div、表格、输入框）的内容都左对齐，实现整体居中但内部内容左对齐的需求。

内容的提问来源于stack exchange，提问作者azzyismeh