(Note:1.Using grid and flex2. Don't mind the language (Vietnamese)3. This is my first time asking for help in Stackoverflow4. 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!