I'm trying to align the items in the center of the page. I'm using display: flex however, this causes the text to be split up into different columns but I don't want that, I want the text to be normal, you know. When the session is set, the text will show; you can see the forms are aligned in the center, but the text isn't.
我正在尝试对齐页面中心的项目。我正在使用display：flex但是，这会导致文本被拆分成不同的列，但我不希望这样，我希望文本正常，你知道。设置会话后，文本将显示;您可以看到表单在中心对齐，但文本不对齐。
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: -0.5px;
}
html,
body {
height: 100%;
width: 100%;
background: #fff;
}
.content-container {
width: 100%;
height: auto;
padding: 10pt;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
margin-top: 30pt;
display: flex;
justify-content: center;
}
.header {
top: 0;
position: fixed;
height: 30pt;
width: 100%;
background: rgba(255, 255, 255, 0.50);
border-bottom: 1.5px solid #0047FF;
}
.header-content {
width: 100%;
height: inherit;
margin: 0 auto;
white-space: nowrap;
line-height: 30pt;
padding: 0 5pt;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header-menu {
border-right: 1px solid #0047FF;
margin-right: 10pt;
width: auto;
height: inherit;
float: left;
padding: 0 5pt 0 0;
}
.header-menu ul li {
list-style: none;
float: left;
}
.header-menu ul li a {
color: #555;
text-decoration: none;
padding: 0 3pt;
float: left;
}
.logout-form__ button {
background: none;
cursor: pointer;
border: none;
outline: none;
color: #555;
}
.logout-form__ button:hover {
color: #888
}
.header-menu ul li a:after {
content: "/";
padding: 0 0 0 5pt
}
.header-menu ul li:last-child a:after {
content: "";
padding: 0;
}
.header-menu ul li a:hover {
color: #888;
}
.header-menu ul li a:hover:after {
color: #555
}
.header-search form input {
border: none;
background: rgba(255, 255, 255, 0.50);
outline: none;
padding: 5pt;
border-top: 1px solid #eee;
width: 250pt;
display: inline-block;
color: #555
}
.header-search form input:focus {
border-color: #ccc;
background: rgba(255, 255, 255, 0.80)
}
.header-search form button {
background: rgba(255, 255, 255, 0.50);
border: none;
outline: none;
border-top: 1px solid #eee;
padding: 5pt;
cursor: pointer;
color: #555
}
.header-search form button:hover {
border-color: #ccc;
background: rgba(255, 255, 255, 0.60);
}
.same-form-styling {
float: left;
padding: 10pt 0;
border-bottom: 1px solid #ccc;
width: auto;
width: 400pt
}
.forms-title {
border-bottom: 1px solid #ccc;
padding: 0 0 10pt 0;
margin-bottom: 10pt
}
.forms-title span {
font-size: 16px;
}
.same-form-styling form input {
width: 100%;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10pt 0;
border: none;
outline: none;
border-bottom: 1px solid #eee;
}
.same-form-styling form button {
border: none;
outline: none;
padding: 10pt;
border-left: 1px solid #eee;
float: left;
background: none;
border-right: 1px solid #eee;
width: 150pt;
}<?php
include_once './Private/Backend/Database/conn.php';
if(isset($_POST['logout'])) {
session_destroy();
unset($_SESSION['id']);
unset($_SESSION['username']);
unset($_SESSION['email']);
header("location: index.php?a=login");
}
/* ### */
if(isset($_POST['login-btn'])) {
$l_email = mysqli_real_escape_string($main, $_POST['l-email']);
$l_email = stripcslashes($l_email);
$l_pass = mysqli_real_escape_string($main, $_POST['l-pass']);
$l_pass = stripcslashes($l_pass);
if(filter_var($l_email, FILTER_VALIDATE_EMAIL)) {
$hashed = md5(sha1(md5(sha1($l_pass))));
$sql = "SELECT * FROM accounts WHERE email='$l_email' and password='$hashed'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$_SESSION['id'] = $row['id'];
$_SESSION['username'] = $row['username'];
$_SESSION['email'] = $row['email'];
header("location: index.php");
}
} else {
header("location: index.php?a=login&loginErr=wrong&email=$l_email");
}
} else {
header("location: index.php?a=login&loginErr=invalidEmail&email=$l_email");
}
}
if(isset($_POST['reg-btn'])) {
$username = mysqli_real_escape_string($main, $_POST['reg-uname']);
$username = stripcslashes($username);
$username = strip_tags($username);
$email = mysqli_real_escape_string($main, $_POST['reg-email']);
$email = stripcslashes($email);
$email = strip_tags($email);
$email_c = mysqli_real_escape_string($main, $_POST['reg-c-email']);
$email_c = stripcslashes($email_c);
$pass = mysqli_real_escape_string($main, $_POST['reg-pass']);
$pass = stripcslashes($pass);
$pass_c = mysqli_real_escape_string($main, $_POST['reg-c-pass']);
$pass_c = stripcslashes($pass_c);
if(!empty($username && $email && $email_c && $pass && $pass_c)) {
$sql = "SELECT * FROM accounts WHERE username='$username'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0 ){
header("location: index.php?a=register®isterErr=userTaken&username=$username&email=$email&cEmail=$email_c");
} else {
if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
if($email == $email_c) {
$sql = "SELECT * FROM accounts WHERE email='$email'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0) {
header("location: index.php?a=register®isterErr=emailTaken&username=$username&email=$email&cEmail=$email_c");
} else {
if(strlen($pass) >= 6) {
if($pass == $pass_c) {
$hashedBrown = md5(sha1(md5(sha1($pass))));
$sql = "INSERT INTO accounts (username, account_type, first_name, last_name, gender, bio, email, password) VALUES ('$username', 'Regular User' , '', '', '', '','$email', '$hashedBrown')";
$result = mysqli_query($main, $sql);
$sql = "SELECT * FROM accounts WHERE username='$username' and email='$email'";
$result = mysqli_query($main, $sql);
$row = mysqli_fetch_assoc($result);
$_SESSION['id'] = $row['id'];
$_SESSION['username'] = $row['username'];
$_SESSION['email'] = $row['email'];
header("location: index.php");
} else {
header("location: index.php?a=register®isterErr=passwordsDoNotMatch&username=$username&email=$email&cEmail=$email_c");
}
} else {
header("location: index.php?a=register®isterErr=passwordLen&username=$username&email=$email&cEmail=$email_c");
}
}
} else {
header("location: index.php?a=register®isterErr=emailsDoNotMatch&username=$username&email=$email&cEmail=$email_c");
}
} else {
header("location: index.php?a=register®isterErr=username=$username&email=$email&cEmail=$email_c");
}
}
} else {
header("location: index.php?a=register®isterErr=allEmpty");
}
}
?>
<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden;">
<head>
<meta charset="UTF-8" />
<title>ICode Foundation</title>
<link rel="stylesheet" type="text/css" href="./Public/CSS/Beta/all.css" />
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-menu">
<ul>
<?php if(!isset($_SESSION['id'])) { ?><li><a href="index.php?a=register">Register</a></li><?php } ?>
<?php if(!isset($_SESSION['id'])) { ?><li><a href="index.php?a=login">Login</a></li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li><a href="#">Home</a></li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li><a href="#">You <span>(<strong><?php echo $_SESSION['username']; ?></strong>)</span></a></li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li><a href="#">
<form action="index.php" method="POST" class="logout-form__">
<button type="submit" name="logout">
Logout
</button>
</form>
</a></li><?php } ?>
</ul>
</div>
<div class="header-search">
<form action="#" method="GET">
<input type="text" placeholder="Search" name="q" autocomplete="off" /><button type="submit" name="search-btn">Search</button>
</form>
</div>
</div>
</div>
<div class="content-container">
<?php if(!isset($_SESSION['id'])) { ?>
<?php if(isset($_GET['a'])) { ?>
<?php if($_GET['a']=="register") { ?>
<div class="register same-form-styling">
<div class="forms-title"><span>Register</span></div>
<form action="index.php" method="POST">
<input type="text" name="reg-uname" placeholder="Username" <?php if(isset($_GET['username'])) { echo 'value="' . $_GET['username'] . '"'; } ?> />
<input type="text" name="reg-email" placeholder="Email Address" <?php if(isset($_GET['email'])) { echo 'value="' . $_GET['email'] . '"'; } ?> />
<input type="text" name="reg-c-email" placeholder="Confirm Email" <?php if(isset($_GET['cEmail'])) { echo 'value="' . $_GET['cEmail'] . '"'; } ?> />
<input type="password" name="reg-pass" placeholder="Password" />
<input type="password" name="reg-c-pass" placeholder="Confirm Password" />
<button type="submit" name="reg-btn">Register</button>
</form>
<div class="register-info" style="clear:both;border-top: 1px solid #ccc;padding: 10pt 0 0 0;">You are not hindered to a specific array of characters to inlude in your password therefore, ensure your password is strong and memorable. Hindering users on what characters they can use in their password is an idiotic move hence, we don't include such feature nor endorse this practice. It is solely your fault and responsibility if your password is easily guessable.</div>
</div>
<?php } elseif($_GET['a']=="login") { ?>
<div class="login same-form-styling">
<div class="forms-title"><span>Login</span></div>
<form action="index.php" method="POST">
<input type="text" placeholder="Email" name="l-email" <?php if(isset($_GET['email'])) { echo 'value="' . $_GET['email'] . '"'; } ?> />
<input type="password" placeholder="Password" name="l-pass" />
<button type="text" name="login-btn">Login</button>
</form>
</div>
<?php } else { ?>
<div class="unknown">
Unknown operation; it's either login or register.
</div>
<?php } ?>
<?php } ?>
<?php } else { ?>
<h1>Welcome</h1>
<p>All you can do is log in, edit your profile can search, view other profiles. Functionality such as blogging is an intended feature to soon be implemented. This site will go through major updates to ensure full reliability and user usability. Other major implementations such as code integrations to advance the site's functionality is desirable however, this site shouldn't be too advanced which could lead to hindrances thinking of new concepts for future updates.</p>
<p>This site will be powered by volunteers; voluntary developers, graphic designers and other skills that are beneficially suggestive towards this project. Your skills must include an array of professional and impeccable knowledge of a broad range of subjects and that bring in a diverse array of talent of knowledge to this project to grow and enlarge the project in many different ways. If you're interested in developing the site, email the lead developer at <a href="mailto:adamhope470@gmail.com">adamhope470@gmail.com</a>. </p>
<p>You must lay your email out in a way that is comprehensible and professional. Ensure that you include your skills and how you will benefit the project in an innovative and intuitive manner. Include your programming skills and what programming languages do you know etc. Any other things that may help the project in different ways.</p>
<p>Skills like legal and business is helpful alongside impeccable English language skills. These skills will eventually contribute to administration and communicating with users to provide support wherever mandatory. You account role will fluctuate the features that you have access to; do not ask nor request roles of high rank, trusted members will be granted administration whereas moderators will be nominated based on the contributions they have made like translations etc. This is a for-profit project however, this will be a non-profitable project for the time being. </p>
<p>If you have any inquiries, questions or reports, you can contact the site's lead developer <a href="#">here</a> or you can contact another administrator <a href="#">here</a>.</p>
<p><strong>Your account could be susceptible to a susepnsion or a perminate ban if you're ever witnessed infringing our community guidelines. Review them <a href="#">here</a>. These guidelines will ensure that the tranquility is persistant throughput, which will ensure that this service is safe for everyone to use. With that stated, before pursuing, you agree that you're 13 years or older.</strong></p>
<?php } ?>
</div>
<div class="footer-wrap">
</div>
</body>
</html>1 个解决方案
#1
1
When you set display: flex on an element it automatically applies flex-direction: row and flex-wrap: nowrap on the children (flex items).
当你在一个元素上设置display：flex时，它会自动应用flex-direction：row和flex-wrap：nowrap on children（flex items）。
This means that the items will line up horizontally and cannot wrap.
这意味着项目将水平排列，无法换行。
You have this:
你有这个：
.content-container {
display: flex;
justify-content: center;
}
jsfiddle演示
Instead, set the container to a vertical direction and then center the items:
而是将容器设置为垂直方向，然后将项目居中：
.content-container {
display: flex;
flex-direction: column;
align-items: center;
}
jsfiddle演示
#1
1
When you set display: flex on an element it automatically applies flex-direction: row and flex-wrap: nowrap on the children (flex items).
当你在一个元素上设置display：flex时，它会自动应用flex-direction：row和flex-wrap：nowrap on children（flex items）。
This means that the items will line up horizontally and cannot wrap.
这意味着项目将水平排列，无法换行。
You have this:
你有这个：
.content-container {
display: flex;
justify-content: center;
}
jsfiddle演示
Instead, set the container to a vertical direction and then center the items:
而是将容器设置为垂直方向，然后将项目居中：
.content-container {
display: flex;
flex-direction: column;
align-items: center;
}
jsfiddle演示