Search code examples
csshtmlalignmenttext-align

HTML5 How to align a table to center inside a form?

I have a <form>, and inside that form, I have a <table>. I tried using text-align: center and align-items:center on that form, but the table inside it is still aligned to the left (while the table's child elements are aligned to the center inside that table). How can I align a table the the center, inside a form?

Solution

  • When u want to align a table in the center position of the parent, simply use:

    css:

    margin: 0 auto;

    EXAMPLE:

    html:

    <form >
 <table>

 </table>
</form>

    css:

    form {
  width:80%; 
  height: 200px; 
  background-color: black;
}

table {
   margin: 0 auto;
   z-index: 1;
   width:50%; 
   height: 50px; 
   background-color: red;
}

    http://jsfiddle.net/bvo7v7f9/