为啥我的文字没有以手机版为中心
Posted
技术标签:
【中文标题】为啥我的文字没有以手机版为中心【英文标题】：How come my text is not centering on the mobile version为什么我的文字没有以手机版为中心 【发布时间】：2021-12-06 16:57:39 【问题描述】：我是编程新手，我正在尝试制作一个响应式网页。文本以桌面版为中心，但在移动版上，由于某种原因，文本向右对齐，我无法弄清楚如何使其完美地居中。有人可以看看我的代码并告诉我我做错了什么吗？谢谢！
*
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
.header
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/banner.png);
background-position: center;
background-size: cover;
position: relative;
nav
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
nav a
color: #fff;
text-decoration: none;
font-size: 14px;
nav a:hover
color:#f44336;
transition: .4s;
.nav-links
flex:1;
text-align: right;
.nav-links ul li
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
.nav-links ul li a
color: #fff;
text-decoration: none;
font-size: 13px;
nav ul li a:hover
color:#f44336;
transition: .4s;
.text-box
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
.text-box h1
font-size: 54px;
.text-box p
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
nav .fa
display: none;
@media(max-width: 700px)
nav
display: flex;
padding: 4% 8%;
justify-content: space-between;
align-items: center;
.text-box h1
font-size: 14px;
.text-box p
font-size: 11px;
.text-box
text-align: center;
.nav-links ul li
display: block;
.nav-links
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
nav ul li a:hover
color:#12161d;
transition: .4s;
nav .fa
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
.nav-links ul
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
</style>
</head>
<body>
<section class="header">
<nav>
<a href="index.html">AMANDA YEE</a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="CV.html">CV</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>NICE TO MEET YOU</h1>
<p>Hi! My name is Amanda Yee and I'm a User Experience Designer studying at Pratt.
</p>
</div>
</section>
<!--Footer-->
<section class="footer">
<div class="icons">
<a href="https://www.linkedin.com/in/amanda-zi-yee/"> <i class="fa fa-linkedin-square"></i></a>
<a href="https://www.instagram.com/yu.zixin/"><i class="fa fa-instagram"></i></a>
<a href="mailto:ayee3@pratt.edu"><i class="fa fa-envelope-o"></i></a>
</div>
</section>
<!--javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu()
navLinks.style.right = "0";
function hideMenu()
navLinks.style.right = "-200px";
</script>
</body>
</html>【问题讨论】：
我使用“运行代码 sn-p”按钮运行了您的代码，并且标题和副标题确实位于输出的中心。您能否为您的问题提供更多背景信息，例如使用的浏览器版本？ 【参考方案1】：首先，我会将overflow-x: hidden; 包含在您的HTML 文档中，如下所示。这样，您就不能水平滚动，这在您的移动版本中是可能的，从而使您的 burgermenu 的子项可见，而无需实际单击它。请记住，如果将其插入*，则根本无法水平滚动。在你认为合适的地方使用它:)
*
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
至于您的文本居中，我建议您使用flexbox 而不是position: absolute 进行定位。一旦你了解了 Flexbox 的工作原理，它就非常易于使用。它也非常适合构建响应式网站。 position: absolute 在某些情况下很好，但如果使用不当，它会很快变得混乱。
希望这可以帮助！如果您有任何问题，请告诉我
.text-box
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
<div class="text-box">
<h1>NICE TO MEET YOU</h1>
<p>Hi! My name is Amanda Yee and I'm a User Experience Designer studying at Pratt.
</p>
</div>【讨论】：
以上是关于为啥我的文字没有以手机版为中心的主要内容，如果未能解决你的问题，请参考以下文章