英文:
Once I make the columns 100 percent of the screen, the contents are aligned on top, instead of the middle
问题
I want to set my column of size vh-100
however the moment I add that piece of code, it will shift everything to the top.
How do I go about avoiding this?
Specifically on the left side, the content has image, text1, text2
I want these three items centered on the left column
centered vertically and horizontally
.left-side {
background-color: #012611;
color: white;
}
h1 {
font-family: "Monarcha";
font-weight: bolder;
}
h3 {
font-family: "Soleil";
}
label {
font-family: "Monarcha";
}
.right-side {
background-color: white;
}
div {
outline: black solid 5px;
}
<!-- Left Column -->
<div class="col-lg-6 col-sm-6 vh-100 center-block text-center d-none d-sm-block left-side">
<img src="../pictures/logo.png" alt="" width="72" height="72" />
<h1>Text1</h1>
<h3>Text2</h3>
</div>
英文:
I want to set my column of size vh-100
however the moment I add that piece of code, it will shift everything to the top.
How do I go about avoiding this?
Specifically on the left side, the content has image, text1, text2
I want these three items centered on the left column
centered vertically and horizontally
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.left-side {
background-color: #012611;
color: white;
}
h1 {
font-family: "Monarcha";
font-weight: bolder;
}
h3 {
font-family: "Soleil";
}
label {
font-family: "Monarcha";
}
.right-side {
background-color: white;
}
div {
outline: black solid 5px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container-fluid">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row justify-content-center align-items-center">
<!-- Left Column -->
<div
class="col-lg-6 col-sm-6 vh-100 center-block text-center d-none d-sm-block left-side"
>
<img src="../pictures/logo.png" alt="" width="72" height="72" />
<h1>Text1</h1>
<h3>Text2</h3>
</div>
<!-- Right Column -->
<div class="col-lg-6 col-sm-6 center-block right-side">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<form class="form-signin">
<div class="text-center d-block d-sm-none">
<img
src="../pictures/logo.png"
alt=""
width="72"
height="72"
/>
<h1>text1</h1>
<h3>text2</h3>
</div>
<h3 class="login-heading mb-4">Login</h3>
<!-- Sign In Form -->
<div class="mb-3">
<label>Email address</label>
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<label>Password</label>
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
</div>
<div class="form-check d-flex justify-content-between mb-3">
<div>
<input
class="form-check-input"
type="checkbox"
value=""
id="rememberPasswordCheck"
/>
<label
class="form-check-label"
for="rememberPasswordCheck"
>
Remember password
</label>
</div>
<a class="small" href="#">Forgot password?</a>
</div>
<div class="d-grid">
<button
class="btn btn-block btn-outline-dark text-uppercase mb-2"
type="submit"
>
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
crossorigin="anonymous"
></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
已添加 flex-column align-items-center justify-content-sm-center。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.left-side {
background-color: #012611;
color: white;
}
h1 {
font-family: "Monarcha";
font-weight: bolder;
}
h3 {
font-family: "Soleil";
}
label {
font-family: "Monarcha";
}
.right-side {
background-color: white;
}
div {
outline: black solid 5px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container-fluid">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row justify-content-center align-items-center">
<!-- Left Column -->
<div
class="col-lg-6 col-sm-6 vh-100 center-block flex-column align-items-center justify-content-sm-center text-center d-none d-sm-flex left-side"
>
<img src="../pictures/logo.png" alt="" width="72" height="72" />
<h1>Text1</h1>
<h3>Text2</h3>
</div>
<!-- Right Column -->
<div class="col-lg-6 col-sm-6 center-block right-side">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<form class="form-signin">
<div class="text-center d-block d-sm-none">
<img
src="../pictures/logo.png"
alt=""
width="72"
height="72"
/>
<h1>text1</h1>
<h3>text2</h3>
</div>
<h3 class="login-heading mb-4">Login</h3>
<!-- Sign In Form -->
<div class="mb-3">
<label>Email address</label>
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<label>Password</label>
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
</div>
<div class="form-check d-flex justify-content-between mb-3">
<div>
<input
class="form-check-input"
type="checkbox"
value=""
id="rememberPasswordCheck"
/>
<label
class="form-check-label"
for="rememberPasswordCheck"
>
Remember password
</label>
</div>
<a class="small" href="#">Forgot password?</a>
</div>
<div class="d-grid">
<button
class="btn btn-block btn-outline-dark text-uppercase mb-2"
type="submit"
>
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
crossorigin="anonymous"
></script>
</body>
</html>
<!-- end snippet -->
英文:
Added flex-column align-items-center justify-content-sm-center
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.left-side {
background-color: #012611;
color: white;
}
h1 {
font-family: "Monarcha";
font-weight: bolder;
}
h3 {
font-family: "Soleil";
}
label {
font-family: "Monarcha";
}
.right-side {
background-color: white;
}
div {
outline: black solid 5px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container-fluid">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row justify-content-center align-items-center">
<!-- Left Column -->
<div
class="col-lg-6 col-sm-6 vh-100 center-block flex-column align-items-center justify-content-sm-center text-center d-none d-sm-flex left-side"
>
<img src="../pictures/logo.png" alt="" width="72" height="72" />
<h1>Text1</h1>
<h3>Text2</h3>
</div>
<!-- Right Column -->
<div class="col-lg-6 col-sm-6 center-block right-side">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<form class="form-signin">
<div class="text-center d-block d-sm-none">
<img
src="../pictures/logo.png"
alt=""
width="72"
height="72"
/>
<h1>text1</h1>
<h3>text2</h3>
</div>
<h3 class="login-heading mb-4">Login</h3>
<!-- Sign In Form -->
<div class="mb-3">
<label>Email address</label>
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<label>Password</label>
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
</div>
<div class="form-check d-flex justify-content-between mb-3">
<div>
<input
class="form-check-input"
type="checkbox"
value=""
id="rememberPasswordCheck"
/>
<label
class="form-check-label"
for="rememberPasswordCheck"
>
Remember password
</label>
</div>
<a class="small" href="#">Forgot password?</a>
</div>
<div class="d-grid">
<button
class="btn btn-block btn-outline-dark text-uppercase mb-2"
type="submit"
>
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
crossorigin="anonymous"
></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论