我正在尝试将元素对齐到页面中央。我正在使用 display: flex 但是，这会导致文本被分成不同的列，但我不希望这样，我希望文本是正常的，你知道的。设置 session 后，将显示文本；您可以看到表格居中对齐，但文本不是。
* {
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>最佳答案
当您在元素上设置 display: flex 时，它会自动在子元素上应用 flex-direction: row 和 flex-wrap: nowrap ( flex 元素)。
这意味着元素将水平排列并且不能换行。
你有这个:
.content-container {
display: flex;
justify-content: center;
}
相反，将容器设置为垂直方向，然后将元素居中:
.content-container {
display: flex;
flex-direction: column;
align-items: center;
}
关于php - Display flex 导致文本被拆分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47001155/