Question

我正在尝试将容器div移动到屏幕中心。我的应用程序使用Electron，VUE，html，css。我尝试了以下代码

<template >
   <div class="login background" style="height:100%" >
      <div>{{error}}</div>
      <button v-on:click="signup">Signup</button>
      <button v-on:click="calendar">Calendar</button>
      <div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="margin-top:300px" >
        <h2 class="form-signin-heading">Welcome Back!</h2>
        <label  class="sr-only" for="inputUsername">Username</label>
        <input v-model="username" type="text" id="inputUsername" name="username"  class="form-control col-lg-1" placeholder="Username" required autofocus style="opacity:1;color:#76323F;font-weight:bold;margin-top:15px"  >
        <label for="inputPassword" class="sr-only">Password</label>
        <input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required style="margin-top:15px;">
        <button v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#76323F;color:#76323F;background-color:#C09F80;border-color:#C09F80;margin-top:15px;opacity:.8;}" type="submit">Log in</button>
      </div>
   </div>
 </template>

Answer 1

＆＃13;

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.8.1</version>
</dependency>

＆＃13;

Answer 2

您尝试居中的div的默认宽度为100％，这就是为什么边距：自动无法正常工作。如果添加text-align：center，则元素将居中

＆＃13;

<div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="text-align:center" >

    <h2 class="form-signin-heading">Welcome Back!</h2>

    <label  class="sr-only" for="inputUsername">Username</label>
    <input v-model="username" type="text" id="inputUsername" name="username"  class="form-control col-lg-1" placeholder="Username" required autofocus style="opacity:1;color:#76323F;font-weight:bold;" >
    <label for="inputPassword" class="sr-only">Password</label>
    <input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
    <button v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#76323F;color:#76323F;background-color:#C09F80;border-color:#C09F80;}" type="submit">Log in</button>

</div>

＆＃13;

Answer 3

希望这是您需要的答案。 7月4日早些时候欢呼和快乐。

#innerLogo {
  display: table-cell;
    margin: 0 auto;
    border: 1px dashed blue;
    vertical-align: middle;
}

#outerLogo {
  display: table;
  width: 100%;
  text-align: center;
  
  height: 400px;
  border: 1px dashed red;
}

<div class="row">
    <div class="container">
        <div id="outerLogo">           
            <div id="innerLogo">
                <h2 class="form-signin-heading">Welcome Back!</h2>

<label  class="sr-only" for="inputUsername">Username</label>
<input v-model="username" type="text" id="inputUsername" name="username"  class="form-control col-lg-1" placeholder="Username" required autofocus style="opacity:1;color:#76323F;font-weight:bold;" >
<label for="inputPassword" class="sr-only">Password</label>
<input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<button v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#76323F;color:#76323F;background-color:#C09F80;border-color:#C09F80;}" type="submit">Log in</button>
            </div>           
        </div>
     </div>
</div>

将div移动到Electron / VUE应用程序的屏幕中心

3 个答案: