0
220
ViewsHow to center an element related to it's above sibling
I have a simple form as below picture
I want to center "Send" button related to the textarea below "Message" label. If I do this with position absolute, relative and custom margins, it looks different and not centered on different resolutions. I'm also using Bootstrap.
My form is inside a parent div;
<div className="my-5 emailform">
<form className="contact-form">
...other elements
<h3>Message</h3>
<textarea className="textarea" name="message" />
<input className="sendbutton" type="submit" value="Send" />
</form>
</div>
So what I'm trying to accomplish is, I want to put "sendbutton" element below-middle of "textarea" element. So far all of my tries were not succesful. How can I center an element to it's sibling responsively?
·
Juan Pablo Isaza
1 answers
Answer question0
.contact-form{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} <div class="my-5 emailform">
<form class="contact-form">
...other elements
<h3>Message</h3>
<textarea class="textarea" name="message" ></textarea>
<input class="sendbutton" type="submit" value="Send" />
</form>
</div>There are other methods too like you can give display: inline-block to form children and set their width: 100% and use text-align: center on the parent. But this is the safest.
·
Juan Pablo Isaza
Report
Answer question