Question

如果有办法将密码和用户名标签置于彼此之下，我就会徘徊？此外，如果你看到一种方法，使这个代码更短的请求告诉我。我是html的菜鸟，所以这段代码可能有些错误。事前Ty，Lukas Mocko！

＆＃13;

p.mom {
  padding-top: 16em
}

p.dad {
  padding-top: 1em
}

p.car {
  padding-left: 56.5em
}

p.car {
  padding-top: 1em
}

＆＃13;

<center>

  <head>
    <style>

    </style>



    <form method="post" action="index.php" name="loginform">



      <p class="mom">
        <label for="login_input_username">имя пользователя</
  </p class="mom">
   <input id="login_input_username" class="login_input" type="text 
    name="user_name" required />



  <p class="dad">
  <label 
 for="login_input_password">&emsp;&emsp;&emsp;&emsp;&emsp;пароль</label>
        <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
      </p class="dad">

</center>

<p class="car">
  <input type="submit" name="login" value="авторизоваться" />
</p class="car">

</form>
</head>

＆＃13;

Answer 1

您可以使用CSS的display: flex;属性

HTML

<form method="post" action="index.php" name="loginform">
<div>
    <label for="login_input_username">имя пользователя</label>
    <input id="login_input_username" class="login_input" type="text" name="user_name" required />
</div>
<div>
    <label for="login_input_password">пароль</label>
    <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
</div>
<div>
    <input type="submit" name="login" value="авторизоваться" />
</div>
</form>

CSS：

form{
   flex: 1;
   display: flex;
   height: 250px;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}
form div{
   margin-bottom: 10px;
}
form div label{
   display: flex;
}
form div button{
   display: flex;
}

Answer 2

您可以使用此代码。

HTML：

<style>
#holidayPopupContent 
        {   display: none;
        }
        .fancybox-opened #holidayPopupContent { display: block; }
</style>
<div id="holidayPopupContent">
        test
    </div>

    <a href="#holidayPopupContent" id="holidayPopup"></a>

<script type="text/javascript">
function openFancybox() {
    setTimeout( function() 
    {
        jQuery("#holidayPopup").fancybox({
        'width': 880,
        'height': 670,
        'autoSize': false
    }).trigger('click');
        //jQuery('#holidayPopup').trigger('click'); 
        jQuery(".fancybox-skin").css("padding", "0px");
    },200);
}
jQuery(document).ready(function() {
    var visited = jQuery.cookie('visited');
    if (visited == 'yes') {
        return false;

    } else {
        openFancybox();
    }
    jQuery.cookie('visited', 'yes', { expires: 30 });

});
</script>

CSS：

<form method="post" action="index.php" name="loginform">
    <div>
        <label for="login_input_username">имя пользователя</label>
        <input id="login_input_username" class="login_input" type="text" name="user_name" required />
    </div>
    <div>
        <label for="login_input_password">пароль</label>
        <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />
    </div>
    <div>
        <input type="submit" name="login" value="авторизоваться" />
    </div>
</form>

Answer 3

你可以试试这个：

<form method="post" action="index.php" name="loginform">
<div style="align-items:center; display: flex; flex-direction: column;">
<div>
<label for="login_input_username">имя пользователя</label><br/>
<input id="login_input_username" class="login_input" type="text" 
name="user_name">
</div>
<div>
<label 
for="login_input_password">пароль</label><br/>
<input id="login_input_password" class="login_input" type="password" 
name="user_password" autocomplete="off" required />
</div>
<div>
<br />
<input type="submit"  name="login" value="авторизоваться" />
</div>
</div>
</form>

Answer 4

p.dad, .car {
  padding-top: 1em;
}

/* center div */

.form-center{ 
  margin: auto;
  width: 50%;
  text-align: center;
 }

<div class="form-center">
 <form method="post" action="index.php" name="loginform">

    <p class="mom">
    <label for="login_input_username">имя пользователя</label>
    </p>
    <input id="login_input_username" class="login_input" type="text" name="user_name" required />

    <p class="dad">
     <label for="login_input_password">пароль</label>
    </p>
     <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required />

    </center>

    <p class="car">
      <input type="submit" name="login" value="авторизоваться" />
    </p>

  </form>
</div>

编辑：我改变了代码。

Answer 5

CSS

   form {
      text-align:center;
    }
   table{margin:  auto;}

HTML

<form method="post" action="index.php" name="loginform">
        <table>
            <tbody><tr>
                <td><label for="login_input_username">имя пользователя</label></td>
                <td><input id="login_input_username" class="login_input" type="text" name="user_name" required=""></td>
            </tr>

            <tr>
                <td> <label for="login_input_password">пароль</label></td>
                <td> <input id="login_input_password" class="login_input" type="password" name="user_password" autocomplete="off" required=""></td>
            </tr>
        </tbody></table>

    </form>

如何使密码和用户名标签彼此居中

5 个答案: