如何使用 CSS 正确对齐 HTML 内联表单？答案

【问题标题】：How to use CSS to align HTML inline form correctly?如何使用 CSS 正确对齐 HTML 内联表单？
【发布时间】：2021-09-02 01:10:59
【问题描述】：

我正在尝试创建一个用于空白填充的模板，使用我找到的 HTML 内联元素表单显示 this other answer very useful.

我的主要挑战是我希望表单水平居中并在计算机中占屏幕宽度的 50%，在较小的屏幕设备中为 100%。

我希望我的文本区域与文本垂直对齐。

我最近学习了一些 flex，所以我尝试将它用于父元素（表单）以垂直和水平对齐，但我没有设法达到预期的结果。我在这里错过了什么？

index.html

<body>
        <form style="margin: 0; padding: 0; display: flex; align-items: center; width: 50%; justify-content: center;">
            <p ><!--style="display: flex; align-items: center;">-->
              My name is 
              <textarea name="name" id="" cols="10" rows="1" placeholder="enter name"></textarea>
              and I come from a village called
              <textarea name="village" cols="10" rows="1" placeholder="enter village"></textarea>
                . In the village of 
                <textarea name="village" cols="10" rows="1" placeholder="enter village"></textarea>
                everybody knows that my name is 
                <textarea name="name" cols="10" rows="1" placeholder="enter name"></textarea>
                .

                My name is 
                <textarea name="name" id="" cols="10" rows="1" placeholder="enter name"></textarea>
                and I come from a village called
                <textarea name="village" cols="10" rows="1" placeholder="enter village"></textarea>
                  . In the village of 
                  <textarea name="village" cols="10" rows="1" placeholder="enter village"></textarea>
                  everybody knows that my name is 
                  <textarea name="name" cols="10" rows="1" placeholder="enter name"></textarea>
                  .
            </p>
        </form>
</body>

/static/style.css

textarea {
    margin: 0 5px;
    background-color: #eff0f1;
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用vertical-align: middle 垂直居中inline-block 元素。

您可以使用 width: 50vw 将宽度设置为屏幕的 50%，并使用 @media screen and (max-width: 600px) 区分较小的屏幕

在这种情况下，您不需要使用flex，这会使事情变得异常复杂。同时，您可以考虑contenteditable 元素，它们可以很好地自然对齐和扩展文本。

[contenteditable] { color: blue; }
p { width: 50vw; margin: 0 auto; }
html, body { text-align: center; }
textarea { display: inline-block; vertical-align: middle; }
@media screen and (max-width: 600px) { p { width: 100vw; } }

<p>
    My name is <span contenteditable="true">enter name</span> and I come from a village
</p>

<p>
    My name is <textarea cols="10" rows="1" placeholder="enter name"></textarea> and I come from a village
</p>

【讨论】：

这看起来很棒！有没有办法像“contenteditable”一样自动增长“textarea”？我需要将
标签包装在

中，这就是我使用“textarea”而不是“span”的原因。
您可以使用javascript放大文本区域，但它不会换行以跟随文本。如果您在跨度上使用唯一的id="span_1"，您可以使用document.getElementById("span_1").textContent 收集他们的内容，但我不知道这是否符合您的需要