(Note:1.Using grid and flex
2. Don’t mind the language (Vietnamese)
3. This is my first time asking for help in Stackoverflow
4. If you have some “language” problems in the code , please contact below)
I’m having a problem with aligning text in CSS. I want the texts to be in the center of the boxes which have borders outside
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%;
}
I’ve tried lots of methods, but I can’t find the solution, I’m a new learner. IDK what’s happening but when I try to stretch the border, I can’t center the text anymore. Idk how to describe this problem but I’ll give u guys 2 images to compare before and after. I’m currently stuck in the “before” picture. I want my web to become like the “after” picture. THIS IS THE NAV PART OF THE WEB. Hope you guys will help me!
New contributor
Duong Duc Dung FX22797 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.