Reputation: 1521
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;
}
Upvotes: 0
Views: 80
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