0

I need to center a form on a page. The common solutions given when doing a web search says you can put a div around the form and apply align="center" attribute to it. But this aligns the controls inside the form, not the form itself. Some other options given also centers the controls.

Please say how to do this with attributes inside the form control. I don't have access to the CSS files.

Daneesha
  • 313
  • 4
  • 10
  • 2
    Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) – Eriks Klotins Jun 04 '21 at 06:32
  • This is about centering a div within another div. And also, the answers use CSS. I don't have access to the CSS files. – Daneesha Jun 04 '21 at 06:36
  • 1
    doesn't matter if it's a div, a form or something else. Also you can only center stuff with CSS. If you can only write HTML, you can also add the CSS via `` tags. – cloned Jun 04 '21 at 06:38

4 Answers4

1

Seems difficult to help you without actual code, but:

Just adding the attribute "align=center" does not help (see http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/att_object_align.asp.html ) - you need to set the correct CSS, which could be "text-align: center" on the wrapping div, as you can see here: https://css-tricks.com/almanac/properties/t/text-align/

Otherwise, you have plenty of options when centering with flexbox, as you can see here: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

You can use Inline-styling to provide that code (use <style>-tag>)

If you use any special framework, which parses HTML attributes, then this also needs to be specified in the question.

Hopefully this answer does provide at least some value. Next time, try to provide a code-snippet - this makes helping you much easier.

Visionstar
  • 355
  • 2
  • 12
1

If you want to centre a block level element you can either use display flex, or margin: 0 auto with a width.

example with margin auto

.myform {
  margin 0 auto;
  width: 400px
}

example with flex

.wrapper {
  display flex;
  align-items: center; /* or justify-content: center */
}
.myForm {
  /* any width */
}

if you want to centre inline elements then text-align: centre works.

Steve Tomlin
  • 3,391
  • 3
  • 31
  • 63
1

Use inline CSS, even though if you don't have access to CSS files or provide a snippet to understand your problem. In simple words here is the code

Put a div around the form specifing classname:

<div class = "a">

Use <style>...</style>

tag after <head> tag (i.e Inline css) and use text-align property.

<style>
div.a{
  text-align: center;
}
</style>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Rohit Survase
  • 61
  • 5
1

enter Flex Box

If you do not have access to the CSS file, make use of inline styles.

In the below example; the parent div is in green color; the centered form is in blue color.

<div style="display: flex; justify-content: center; background: green">
  <form style="border: 1px dotted black; width: 250px; background: blue"> <!-- set the width to show that the centering does not affect the form content -->
     <input type="text" value="I DO NOT WANT TO CENTER!" />
  </form>
</div>
Chin. Udara
  • 694
  • 4
  • 19