Form align in to center

Question

I have been reading all the various posts on stackoverflow and other but still yet I am facing an issue. Please don't make it as duplicate.

I am unable to align form id="clientLogin" even I use float:center/middle; and position etc. But can't get success.please fix my issue or if I doing any mistakes in case please update that. Thank you advance! Screenshot of image

CSS FILE: https://pastebin.com/Pqvu0s9h

  <div id="content">
        
         <h1>Check Ticket Status</h1>
<p>To view the status of a ticket, provide us with the login details below.</p>
<form action="login.php" method="post" id="clientLogin">
    <strong></strong>
    <br>
    <div>
        <label for="email">E-Mail Address:</label>
        <input id="email" type="text" name="lemail" size="30" value="">
    </div>
    <div>
        <label for="ticketno">Ticket ID:</label>
        <input id="ticketno" type="text" name="lticket" size="30" value=""></td>
    </div>
    <p>
        <input class="btn" type="submit" value="View Status">
    </p>
    </form>
<br>
<p>
If this is your first time contacting us or you've lost the ticket ID, please <a href="home.php">open a new ticket</a>.    
</p>
        </div>
        
        

    </div>

score 0 · Answer 1 · answered May 29 '18 at 14:56

0

Change your css for the selector #clientLogin like this. You need to remove the property position: absolute;

#clientLogin {
  width: 400px;
  margin-top: 20px;
  padding: 10px 100px 10px 10px;
  border: 1px solid #ccc;
  background: url('/assets/copyright-shiv/images/lock.png?1319655200') 440px 50% no-repeat #FCF5E9;
  margin-left: auto;
  margin-right: auto;
}

answered May 29 '18 at 14:56

Aryan Twanju

2,464
1
9
12

It's was awesome – John_Cartor May 29 '18 at 15:55
if it worked for you, how about ticking my answer as right one...that would be great :) – Aryan Twanju May 29 '18 at 15:59
I am not getting sir.. – John_Cartor May 29 '18 at 16:03
Could you tell me how to I change this color change via html `` – John_Cartor May 29 '18 at 16:03

score -1 · Accepted Answer · answered May 29 '18 at 14:59

-1

This is done with a table, but could also be done in a form. (see class name and ID name)

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#clientLogin{
  max-width: 50%;
}

<div class="content">
  <table id="clientLogin">
    <tr>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </table>
</div>

answered May 29 '18 at 14:59

Kix__g

25
5

Thank you it was helpful. Could you tell me one thing more that how i add two blue line like nav bar without any options. Pls help – John_Cartor May 29 '18 at 15:55

Form align in to center

2 Answers2