(注：1.使用grid和flex 2. 不介意语言（越南语） 3. 这是我第一次在 Stackoverflow 寻求帮助 4. 如果您在代码中遇到一些“语言”问题，请联系下面）
我在 CSS 中对齐文本时遇到问题。我希望文本位于外面有边框的框的中心
HTML：
type her<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="font.css" />
<title>Assignment02</title>
</head>
<body>
<header>
<header class="container">
<img src="banner.jpg" class="img"
width="1247"
height="504.67"
>
<div class="centered">
<h1>Dương Đức Dũng</h1>
<h4>Full Stack Developer</h4>
</div>
</header>
</header>
<div class="main-header">
<h1 class="textname"></h1>
<nav>
<div class="box-container">
<div class="wrapper">
<!-- <div class="box">
</div> -->
<a href="#" class="thongtin">Thông tin</a>
</div>
<div class="wrapper">
<!-- <div class="box">
</div> -->
<a href="#" class="lilich">Lý lịch</a>
</div>
<div class="wrapper">
<div class="box">
</div>
<h6>Full Stack Developer</h6>
</div>
<div class="wrapper">
<!-- <div class="box">
</div> -->
<a href="#" class="chungchi">Chứng chỉ</a>
</div>
<div class="wrapper">
<!-- <div class="box">
</div> -->
<a href="#" class="">Dự Án</a>
</div>
</div>
</nav>
<!-- <div class="clear"></div> -->
</div>
</body>
</html>
CSS：
body{
height: 2000px;
}
.container {
position: relative;
text-align: center;
color: white;
/* background-color: grey; */
}
.img{
filter: brightness(30%);
}
header{
font-family:'Courier New', Courier, monospace;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Add a black background color to the top navigation */
h2{
font-family: 'Courier New', Courier, monospace;
}
nav{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap:10px;
}
.box-container {
display: flex;
justify-content: center;
gap: 25px;
}
.box::before {
content: "Dương Đức Dũng"
}
.box{
font-family: 'Courier New', Courier, monospace;
}
.wrapper {
display: flex;
flex-direction: column;
text-align: center;
}
a{
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
}
h6{
color: gray;
font-family: 'Courier New', Courier, monospace;
}
.thongtin{
border-right: 0.5px solid red;
border-left: 0.5px solid red;
height: 100%;
}
.duan{
border-right: 0.5px solid red;
border-left: 0.5px solid red;
height: 100%;
}
.lilich{
border-right: 0.5px solid red;
border-left: 0.5px solid red;
height: 100%;
}
.chungchi{
border-right: 0.5px solid red;
border-left: 0.5px solid red;
height: 100%;
}
我尝试了很多方法，但找不到解决方案，我是一个新学习者。我不知道发生了什么，但是当我尝试拉伸边框时，我无法再将文本居中。我不知道如何描述这个问题，但我会给你们两张图片来比较之前和之后的情况。我目前停留在“之前”的画面中。我希望我的网站变得像“之后”的图片一样。这是网络的导航部分。希望大家帮帮我！
一个好的、简单且直接的解决方案就是使用 Flexbox 并将项目垂直居中，并在 CSS 中使用
align-items: center;看这个例子：
body,
ul {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
li {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
width: 5rem;
height: 2rem;
border-left: 2px solid skyblue;
border-right: 2px solid skyblue;
}<ul>
<li>Calculus</li>
</ul>