Menu
I embedded a google form on my site, which is wrapped inside a div. I try to center it with CSS, but it doesn't work. Is there a way to accomplish this task?
My code:
#googleForm {
margin-left: auto;
margin-right: auto;
}<div id="googleForm">
<iframe src="https://docs.google.com/forms....></iframe>
</div>
849
You can easily align form elements in the center using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS.
Right-click any element in the Google Form and choose Inspect Element . Next, switch to the Styles panel and experiment with different styles for colors, padding, font-size and any other CSS property. You can then copy the CSS and paste it into the custom CSS section.
Like last time, you must know the width and height of the element you want to center. Set the position property of the parent element to relative . Then set the child's position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.
You can add text-align: center to element with id googleForm. Also you can safely remove margin-left and margin-right:
#googleForm {
/*margin-left: auto;/*
/*margin-right: auto;*/
text-align: center;
}<div id="googleForm">
<iframe src="https://docs.google.com/forms....></iframe>
</div>If you want to use margin: 0 auto you have to set the width of the element:
#googleForm {
width: 304px;
margin: 0 auto;
}<div id="googleForm">
<iframe src="https://docs.google.com/forms....></iframe>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
