Question 285097 in Html Question posted in
Some basic documentation can be found here.

Html – How do I center a form while not altering the contents and keeping them still aligned left?

The last problem for my Inputs section in Computer Science class requires me to style it to an existing website’s style. That involves having the form centered but not its content. I have a form that has some input tags and a table as well as a header and div in it as well.

I looked up solutions to similar problems here but none work for mine.

--- HTML ---
<body>
    <div id='main'>
        <form>
            <h1>Title</h1>
            <div>Subtitle</div>
            <section>
                <table>
                    --- Table Contents ---
                </table>
            </section>
            <section>
                --- Input Tags ---
            </section>
        </form>
    </div>
</body>

--- CSS ---
#main{
    display:inline-block;
    text-align:center;
    margin:0 auto;
}
form section{
    text-align:left;
    margin:8px;
    padding:10px;
}

That is the most general form of what I have now after trying several other solutions from other posts. What happens is either all just gets aligned to the left, all but the table gets centered, or only the header and div gets center but so does the text.

Tags:

2

Answers


  1. 0

    I would recommend trying flexbox if you haven’t already. I personally haven’t used it on things with text much, but I always find it helps when I otherwise struggle to get something to center just how I want it.

    Surrounding the input section with a <div> and giving that <div> a CSS class with these properties will probably do the trick:

    display: flex;
justify-content: center;

    This should horizontally center all elements inside it (just your input form in this case), but hopefully leave the text inside alone since that’s a separate element with its own properties.

    Login or Signup to reply.
  2. 0

    One possible solution is to style the form as an inline block, which means it will only be as wide as it needs to be to accommodate its contents. To center it on the page, place a wrapper around it styled with text-align: center, but then be sure to add text-align: left to the form itself, to prevent the form contents from being centered.

    .form-wrapper {
  text-align: center;
}

form {
  display: inline-block;
  background: tan;
  padding: 0 2em;
  text-align: left;
  border-radius: 0.5em;
}
    <div class="form-wrapper">
  <form>
    <h1>Title</h1>
    <p>I am some left aligned text</p>
    <p>Name <input type="text"></p>
    <p>Address <input type="text"></p>
    <p><input type="submit"></p>
  </form>
</div>

    A flexbox is even easier:

    .form-wrapper {
  display: flex;
  justify-content: center;
}

form {
  background: tan;
  padding: 0 2em;
  border-radius: 0.5em;
}
    <div class="form-wrapper">
  <form>
    <h1>Title</h1>
    <p>I am some left aligned text</p>
    <p>Name <input type="text"></p>
    <p>Address <input type="text"></p>
    <p><input type="submit"></p>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search