How to use CSS to align HTML inline form correctly?

Question

I am trying to create a template for blank filling, using HTML inline element forms display for which I found this other answer very useful.

My main challenge is that I would like the form to be horizontally centered and 50% of the screen width in the computer, 100% in a smaller screen device.

Vertically, I would like my text area to be aligned with the text.

I recently learned a bit of flex so I tried using it for the parent element (form) to align both vertically and horizontally but I have not managed to achieve the desired results. What am I missing here?

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;
}

Simon · Accepted Answer · 2021-06-17 09:29:10Z

1

You can vertically center inline-block elements using vertical-align: middle.

You can set the width to 50% of the screen using width: 50vw and differentiate a smaller screen using the @media screen and (max-width: 600px)

You do not need to play with flex in this case, this will make things incredibly more complex. Meanwhile, you can consider contenteditable elements that will nicely align and expand the text naturally.

[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>

answered Jun 17, 2021 at 9:29

Simon

2,4331 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

G. Macia Over a year ago

This looks great! Is there a way to auto-grow a "textarea" just like "contenteditable" does? I need to wrap the <p> tags within a <form> so that is why I was using "textarea" and not "span".

Simon Over a year ago

You can enlarge the textarea using javascript but it will not wrap to a new line to follow the text. If you use unique id="span_1" on the span, you can collect their content with document.getElementById("span_1").textContent but I cannot tell if this would fit your need

Collectives™ on Stack Overflow

How to use CSS to align HTML inline form correctly?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related