CODEWITHSUNDEEP
htmlcss
G. Macia
G. Macia

Reputation: 1521

How to use CSS to align HTML inline form correctly?

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?

enter image description 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;
}

Upvotes: 0

Views: 80

Answers (1)

Simon
Simon

Reputation: 2433

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>

Upvotes: 1

Related Questions