I'm currently working on a login page and experiencing difficulty styling Vue templates using CSS.
Here is the code that works without Vue:
HTML
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
However, when I attempt to replicate this in a Vue template, it doesn't work as expected. This is due to the use of HTML and body tags in the CSS. How can I achieve the same styling result in a Vue template without referencing the html and body tags?
After following the recommended solution:
with vue
without vue
Although the styling has improved compared to before, it is still not fully functional. I have encountered similar issues in the past. Do you have any suggestions on how to resolve this?